Update React Navigation with Redux

Author: Ar11rA

10-navigation/10.2-integrating-with-redux-store.md

@@ -25,9 +25,11 @@ While the integration is completely optional, we highly recommend doing this if
 
 ### How do you integrate react-navigation to the Redux store?
 
-Integration with the Redux store is pretty easy. Let's continue with the integration in our NoteTaker app using __two__ simple steps.
+Integration with the Redux store is pretty easy. Let's continue with the integration in our NoteTaker app using __three__ simple steps.
 
-1. In your reducer's index file, add the reducer using `getStateForAction` function.
+Run `npm install react-navigation-redux-helpers` or `yarn add react-navigation-redux-helpers`
+
+1. In your reducer's index file, add the following:
 
  > reducers/index.js
 
@@ -36,40 +38,127 @@ Integration with the Redux store is pretty easy. Let's continue with the integra
  import test from './test.reducer';
  import Router from '../../routes';
 
- const nav = (state, action) => (
- Router.router.getStateForAction(action, state) || state;
- );
-
- export default combineReducers({
- test,
- nav
- });
+ const router = Router.router;
+ const homeNavAction = router.getActionForPathAndParams('home');
+ const initialNavState = router.getStateForAction(homeNavAction);
 
+ const navReducer = (state = initialNavState, action) => { 
+ const nextState = router.getStateForAction(action, state);
+ return nextState || state;
+};
  ```
 
-2. In your App.container.js file, where the Router component is being imported, pass navigation prop with dispatch and nav state.
+ Now let's go through the code
 
- The new app container file will look something like this:
- > App.container.js
+ - `router.getActionForPathAndParams`: This function receives the key defined for a route in Navigator and params and returns an action which is needed to update the navigation state. In redux language, we need to call this action to navigate to a route. 
 
- ```js
- class App extends Component {
- render () {
- const {dispatch, nav} = this.props;
- return (
- <Router navigation={addNavigationHelpers({dispatch, state: nav})}/>
- );
- }
+ Output of this statement: `Object {type: "Navigation/NAVIGATE", routeName: "home", action: Object}`
+
+ This is the action that we get for the path 'home'. This becomes the initial route of our navigator.
+
+ - `router.getStateForAction(homeNavAction)`: : The above step gives us the action for navigating to the initial route, now we have to update the state of the Navigator to actually navigate to the route. So we pass the action and the current state of the navigator to getStateForAction and it returns the new updated state. 
+
+ Output of this statement:
+
+```bash
+ Object {key: "StackRouterRoot", isTransitioning: false, index: 0, routes: Array(1)}
+ index: 0
+ isTransitioning: false
+ key: "id-1522736064605-0"
+ params: undefined
+ routeName: "home"
+ routes: Array(1) {
+ 0: Object
+ key: "id-1522736173525-0"
+ params: undefined
+ routeName: "home"
+ }
+```
+
+
+2. Add React Navigation Redux Middleware to store
+
+```js
+import React, { Component } from 'react';
+import { Provider } from 'react-redux';
+import { createStore, applyMiddleware } from 'redux';
+import reducers from './reducers';
+import { createReactNavigationReduxMiddleware } from 'react-navigation-redux-helpers';
+
+import RouterWithNavState from './routes';
+
+const middleware = createReactNavigationReduxMiddleware(
+ 'root',
+ state => state.nav,
+);
+
+const store = createStore(reducers, {}, applyMiddleware(middleware));
+
+export default class App extends Component {
+ render() {
+ return (
+ <Provider store={store}>
+ <RouterWithNavState />
+ </Provider>
+ );
+ }
+}
+```
+
+3. Modify main routes file as follows:
+
+```js
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { StackNavigator, addNavigationHelpers } from 'react-navigation';
+import { createReduxBoundAddListener } from 'react-navigation-redux-helpers';
+import PropTypes from 'prop-types';
+
+import AuthRoutes from './auth.routes';
+import Home from '../Components/Home';
+
+export const Router = StackNavigator({
+ home: {
+ screen: Home,
+ navigationOptions: {
+ header: null
+ }
+ },
+ auth: {
+ screen: AuthRoutes,
+ navigationOptions: {
+ header: null
  }
+ }
+});
 
- const mapStateToProps = ({nav}) => ({
- nav
- });
+class RouterWithNavState extends Component {
 
- const mapDispatchToProps = (dispatch) => ({
- dispatch
- });
- ```
+ render() {
+ const addListener = createReduxBoundAddListener('root');
+ const { dispatch, nav } = this.props;
+ return (
+ <Router
+ navigation={addNavigationHelpers({ dispatch, state: nav, addListener })}
+ />
+ );
+ }
+}
+
+
+const mapStateToProps = (state) => {
+ return ({
+ nav: state.nav
+ });
+};
+
+RouterWithNavState.propTypes = {
+ dispatch: PropTypes.func,
+ nav: PropTypes.object
+};
+
+export default connect(mapStateToProps)(RouterWithNavState);
+``` 
 
 After the integration, you will be able to see the navigation state and actions inside your debugger's store.