@@ -25,9 +25,11 @@ While the integration is completely optional, we highly recommend doing this if
2525
2626### How do you integrate react-navigation to the Redux store?
2727
28- Integration with the Redux store is pretty easy. Let's continue with the integration in our NoteTaker app using __ two __ simple steps.
28+ Integration with the Redux store is pretty easy. Let's continue with the integration in our NoteTaker app using __ three __ simple steps.
2929
30- 1 . In your reducer's index file, add the reducer using ` getStateForAction ` function.
30+ Run ` npm install react-navigation-redux-helpers ` or ` yarn add react-navigation-redux-helpers `
31+ 32+ 1 . In your reducer's index file, add the following:
3133
3234 > reducers/index.js
3335
@@ -36,40 +38,134 @@ Integration with the Redux store is pretty easy. Let's continue with the integra
3638 import test from ' ./test.reducer'
3739 import Router from ' ../../routes'
3840
39- const nav = (state , action ) => (
40- Router .router .getStateForAction (action, state) || state;
41- );
41+ const router = Router .router ;
42+ const homeNavAction = router .getActionForPathAndParams (' home'
43+ const initialNavState = router .getStateForAction (homeNavAction);
44+ 45+ const nav = (state = initialNavState , action ) => {
46+ const nextState = router .getStateForAction (action, state);
47+ return nextState || state;
48+ };
4249
4350 export default combineReducers ({
44- test,
45- nav
51+ test,
52+ nav
4653 });
47- 4854 ```
4955
50- 2 . In your App.container.js file, where the Router component is being imported, pass navigation prop with dispatch and nav state.
56+ Now let's go through the code:
5157
52- The new app container file will look something like this:
53- > App.container.js
58+ - ` 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.
5459
55- ``` js
56- class App extends Component {
57- render () {
58- const {dispatch , nav } = this .props ;
59- return (
60- < Router navigation= {addNavigationHelpers ({dispatch, state: nav})}/ >
61- );
62- }
60+ Output of this statement: ` Object {type: "Navigation/NAVIGATE", routeName: "home", action: Object} `
61+ 62+ This is the action that we get for the path 'home'. This becomes the initial route of our navigator.
63+ 64+ - ` 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.
65+ 66+ Output of this statement:
67+ 68+ ``` bash
69+ Object {key: " StackRouterRoot"
70+ index: 0
71+ isTransitioning: false
72+ key: " id-1522736064605-0"
73+ params: undefined
74+ routeName: " home"
75+ routes: Array(1) {
76+ 0: Object
77+ key: " id-1522736173525-0"
78+ params: undefined
79+ routeName: " home"
80+ }
81+ ```
82+ 83+ 84+ 2 . Add React Navigation Redux Middleware to store:
85+ 86+ ``` js
87+ import React , { Component } from ' react'
88+ import { Provider } from ' react-redux'
89+ import { createStore , applyMiddleware } from ' redux'
90+ import reducers from ' ./reducers'
91+ import { createReactNavigationReduxMiddleware } from ' react-navigation-redux-helpers'
92+ 93+ import RouterWithNavState from ' ./routes'
94+ 95+ const middleware = createReactNavigationReduxMiddleware (
96+ ' root'
97+ state => state .nav ,
98+ );
99+ 100+ const store = createStore (reducers, {}, applyMiddleware (middleware));
101+ 102+ export default class App extends Component {
103+ render () {
104+ return (
105+ < Provider store= {store}>
106+ < RouterWithNavState / >
107+ < / Provider>
108+ );
109+ }
110+ }
111+ ```
112+ 113+ 3 . Modify main routes file as follows:
114+ 115+ ``` js
116+ import React , { Component } from ' react'
117+ import { connect } from ' react-redux'
118+ import { StackNavigator , addNavigationHelpers } from ' react-navigation'
119+ import { createReduxBoundAddListener } from ' react-navigation-redux-helpers'
120+ import PropTypes from ' prop-types'
121+ 122+ // example routes
123+ import AuthRoutes from ' ./auth.routes'
124+ // example component
125+ import Home from ' ../Components/Home'
126+ 127+ export const Router = StackNavigator ({
128+ home: {
129+ screen : Home,
130+ navigationOptions: {
131+ header: null
132+ }
133+ },
134+ auth: {
135+ screen : AuthRoutes,
136+ navigationOptions: {
137+ header: null
63138 }
139+ }
140+ });
64141
65- const mapStateToProps = ({nav}) => ({
66- nav
67- });
142+ class RouterWithNavState extends Component {
68143
69- const mapDispatchToProps = (dispatch ) => ({
70- dispatch
71- });
72- ```
144+ render () {
145+ const addListener = createReduxBoundAddListener (' root'
146+ const { dispatch , nav } = this .props ;
147+ return (
148+ < Router
149+ navigation= {addNavigationHelpers ({ dispatch, state: nav, addListener })}
150+ / >
151+ );
152+ }
153+ }
154+ 155+ 156+ const mapStateToProps = (state ) => {
157+ return ({
158+ nav: state .nav
159+ });
160+ };
161+ 162+ RouterWithNavState .propTypes = {
163+ dispatch: PropTypes .func ,
164+ nav: PropTypes .object
165+ };
166+ 167+ export default connect (mapStateToProps)(RouterWithNavState);
168+ ```
73169
74170After the integration, you will be able to see the navigation state and actions inside your debugger's store.
75171
0 commit comments