@@ -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,127 @@ 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- );
42- 43- export default combineReducers ({
44- test,
45- nav
46- });
41+ const router = Router .router ;
42+ const homeNavAction = router .getActionForPathAndParams (' home'
43+ const initialNavState = router .getStateForAction (homeNavAction);
4744
45+ const navReducer = (state = initialNavState , action ) => {
46+ const nextState = router .getStateForAction (action, state);
47+ return nextState || state;
48+ };
4849 ```
4950
50- 2 . In your App.container.js file, where the Router component is being imported, pass navigation prop with dispatch and nav state.
51+ Now let's go through the code
5152
52- The new app container file will look something like this:
53- > App.container.js
53+ - ` 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.
5454
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- }
55+ Output of this statement: ` Object {type: "Navigation/NAVIGATE", routeName: "home", action: Object} `
56+ 57+ This is the action that we get for the path 'home'. This becomes the initial route of our navigator.
58+ 59+ - ` 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.
60+ 61+ Output of this statement:
62+ 63+ ``` bash
64+ Object {key: " StackRouterRoot"
65+ index: 0
66+ isTransitioning: false
67+ key: " id-1522736064605-0"
68+ params: undefined
69+ routeName: " home"
70+ routes: Array(1) {
71+ 0: Object
72+ key: " id-1522736173525-0"
73+ params: undefined
74+ routeName: " home"
75+ }
76+ ```
77+ 78+ 79+ 2 . Add React Navigation Redux Middleware to store
80+ 81+ ``` js
82+ import React , { Component } from ' react'
83+ import { Provider } from ' react-redux'
84+ import { createStore , applyMiddleware } from ' redux'
85+ import reducers from ' ./reducers'
86+ import { createReactNavigationReduxMiddleware } from ' react-navigation-redux-helpers'
87+ 88+ import RouterWithNavState from ' ./routes'
89+ 90+ const middleware = createReactNavigationReduxMiddleware (
91+ ' root'
92+ state => state .nav ,
93+ );
94+ 95+ const store = createStore (reducers, {}, applyMiddleware (middleware));
96+ 97+ export default class App extends Component {
98+ render () {
99+ return (
100+ < Provider store= {store}>
101+ < RouterWithNavState / >
102+ < / Provider>
103+ );
104+ }
105+ }
106+ ```
107+ 108+ 3 . Modify main routes file as follows:
109+ 110+ ``` js
111+ import React , { Component } from ' react'
112+ import { connect } from ' react-redux'
113+ import { StackNavigator , addNavigationHelpers } from ' react-navigation'
114+ import { createReduxBoundAddListener } from ' react-navigation-redux-helpers'
115+ import PropTypes from ' prop-types'
116+ 117+ import AuthRoutes from ' ./auth.routes'
118+ import Home from ' ../Components/Home'
119+ 120+ export const Router = StackNavigator ({
121+ home: {
122+ screen : Home,
123+ navigationOptions: {
124+ header: null
125+ }
126+ },
127+ auth: {
128+ screen : AuthRoutes,
129+ navigationOptions: {
130+ header: null
63131 }
132+ }
133+ });
64134
65- const mapStateToProps = ({nav}) => ({
66- nav
67- });
135+ class RouterWithNavState extends Component {
68136
69- const mapDispatchToProps = (dispatch ) => ({
70- dispatch
71- });
72- ```
137+ render () {
138+ const addListener = createReduxBoundAddListener (' root'
139+ const { dispatch , nav } = this .props ;
140+ return (
141+ < Router
142+ navigation= {addNavigationHelpers ({ dispatch, state: nav, addListener })}
143+ / >
144+ );
145+ }
146+ }
147+ 148+ 149+ const mapStateToProps = (state ) => {
150+ return ({
151+ nav: state .nav
152+ });
153+ };
154+ 155+ RouterWithNavState .propTypes = {
156+ dispatch: PropTypes .func ,
157+ nav: PropTypes .object
158+ };
159+ 160+ export default connect (mapStateToProps)(RouterWithNavState);
161+ ```
73162
74163After the integration, you will be able to see the navigation state and actions inside your debugger's store.
75164
0 commit comments