diff --git a/docs/redux.md b/docs/redux.md index 51f65e43..05dd9fc5 100644 --- a/docs/redux.md +++ b/docs/redux.md @@ -8,74 +8,193 @@ when it comes to integrating with other modules such a [`react-redux`](https://g [`react-redux-firebase`](http://docs.react-redux-firebase.com/history/v2.0.0) provides simplified and standardized common redux/firebase logic. To add `react-redux-firebase` to your project: +1. Make sure you already have `redux`, `react-redux`, `redux-thunk` installed (if not, run `npm i --save redux react-redux redux-thunk`) 1. Run `npm i --save react-redux-firebase@canary` *we point to canary here to get current progress with v2.0.0* -1. Pass `react-native-firebase` instance into `reactReduxFirebase` when creating store: +1. Add `firebaseStateReducer` under `firebase` key within reducer: + **reducers.js** + ```js + import { combineReducers } from 'redux'; + import { firebaseStateReducer } from 'react-redux-firebase'; + + export const makeRootReducer = (asyncReducers) => { + return combineReducers({ + // Add sync reducers here + firebase: firebaseStateReducer, + ...asyncReducers + }); + }; + + export default makeRootReducer; + + // Useful for injecting reducers as part of async routes + export const injectReducer = (store, { key, reducer }) => { + store.asyncReducers[key] = reducer + store.replaceReducer(makeRootReducer(store.asyncReducers)) + }; + ``` +1. Pass `react-native-firebase` App instance into `reactReduxFirebase` when creating store: + + **createStore.js** ```js import { applyMiddleware, compose, createStore } from 'redux'; - import { getFirebase } from 'react-redux-firebase' import RNFirebase from 'react-native-firebase'; + import { getFirebase, reactReduxFirebase } from 'react-redux-firebase'; + import thunk from 'redux-thunk'; + import makeRootReducer from './reducers'; const reactNativeFirebaseConfig = { debug: true }; - - const firebase = RNFirebase.initializeApp(reactNativeFirebaseConfig); - // for more config options, visit http://docs.react-redux-firebase.com/history/v2.0.0/docs/api/compose.html const reduxFirebaseConfig = { userProfile: 'users', // save users profiles to 'users' collection - } + }; - const middleware = [ - thunk.withExtraArgument({ getFirebase }), - // place other middleware here - ]; + export default (initialState = { firebase: {} }) => { + // initialize firebase + const firebase = RNFirebase.initializeApp(reactNativeFirebaseConfig); - const store = createStore( - reducer, - {}, // initial state - compose( - reactReduxFirebase(firebase, reduxConfig), // pass in react-native-firebase instance instead of config - applyMiddleware(...middleware) - ) - ) + const middleware = [ + // make getFirebase available in third argument of thunks + thunk.withExtraArgument({ getFirebase }), + ]; + + const store = createStore( + makeRootReducer(), + initialState, + compose( + reactReduxFirebase(firebase, reduxFirebaseConfig), // pass initialized react-native-firebase app instance + applyMiddleware(...middleware) + ) + ); + return store; + }; ``` -1. Then in your components you can use `firebaseConnect` to gather data from Firebase and place it into redux: +1. Wrap in `Provider` from `react-redux`: + + **index.js** ```js - import { isLoaded } from 'react-redux-firebase' - import { compose } from 'redux'; - const Todos = ({ todos }) => { - if (!isLoaded(todos)) { - return