In this lesson you will learn how to track the React Navigation state in Redux. We’ll take a dive into the `getStateForAction` and `getActionForPathAndParams` functions that drive the functionality of a React Navigation router and how to use them to accomplish your navigation needs.

https://app.egghead.io/api/v1/lessons/react-native-integrate-redux-with-react-navigation/subtitles

Integrate Redux with React Navigation

Instructor: [00:00] We're starting with an application that has two navigators. First, a tab navigator, which renders a favorites screen and a recent screen. It also opens up a modal screen which is being rendered by a stack navigator with a configuration of mode modal.

[00:17] To begin integrating Redux into React navigation, we're going to go to our entry point of our application. Which is currently just importing React, our navigator, then exporting that navigator.

[00:27] To start, we'll have to import a handful of things from third-party packages. The first one's going to be from React navigation. From this package, what we're going to import is addNavigationHelpers.

[00:37] We'll then go ahead and import, from Redux, combineReducers, create store and apply middleware. From React Redux, we want to import provider and connect. From react-navigation-redux-helpers, we want to import createReactNavigationReduxMiddleware and create Redux bound addListener.

[01:08] The final third-party package we need to import is logger from Redux logger. That will allow us to actually see that our navigation is happening within Redux. Finally, from our application, we also want to import main app from our router file.

[01:23] With those out of the way, we can go ahead and start setting up our initial state. To do this, we'll say RootNavigator.router.getState for action. Since our initial screen is actually within our tab navigator -- which is our main app -- we need to say mainApp.router.getActionForPathAndParams. Then, we want to pass it the key of our initial screen, which is favorites.

[01:48] We can now go ahead and start setting up our nav reducer, and we'll pass it our state. We'll give it an initial state of the initial state we just defined, and then the second argument is our action.

[02:00] To get the next state, we want to say RootNavigator.router.getStateForAction. Then, I'll pass it the action and the state. Finally, we can go ahead and return nextState. Or, if that's not defined for some reason, we'll just default to the existing state.

[02:19] We can then go ahead and set up our root reducer, and we'll use combineReducers here. We'll set a nav key to handle our nav state. This is where you go ahead and add in any of your other reducers.

[02:32] Since we're overwriting the navigation, we need to go ahead and create a new React navigation middleware, to ensure all events are fired correctly. We'll go ahead and call that createReactNavigationReduxMiddleware.

[02:45] As the first argument, we'll pass it a string of root, then as the second argument, we'll pass a function which return state.nav. We then want to create an addListener variable, which is going to be equal to the create Redux bound addListener.

[03:01] This is where we want to pass it the root key, which aligns with what we created here in our React navigation Redux middleware. We can now go ahead and create app, which is going to equal a component that's going to have a props of dispatch and nav.

[03:18] From there, we're going to go ahead and return our root navigator, which is the stack navigator that's the root of our application. On this, we want to pass a navigation prop. Inside of that navigation prop, we'll use the addNavigationHelpers.

[03:32] We're going to pass an object with a key of dispatch. State is going to be equal to nav, then we want to make sure we pass that addListener that we created. So that all the events that happen within React navigation still propagate correctly.

[03:47] We then want to set up our mapStateToProps, and that's going to be equal to a function, which goes ahead and returns nav from where we have it in our reducer. Which is state.nav.

[04:01] We can now create our app with navigation state, and that's going to be equal to connect. We'll pass it the mapStateToProps, then we'll pass it app. We then need to create our store, and we can do that by saying createStore. We'll pass it the root reducer, then we'll want to pass it our middleware.

[04:22] We'll say applyMiddleware, then it'll pass the React navigation middleware, as well as our logger middleware. We can now replace our export default with a function. From within here, we'll say provider, and we'll pass it the store of store.

[04:40] Within our provider component, we want to return our app with navigation state. Upon refresh, our application works exactly the same way. But if we observe our Redux logger, as we go ahead and change, we can see that all these navigation events are actually running through our Redux store.

[04:58] You can go ahead and modify your application based off of these different events.

Integrate Redux with React Navigation

Share this video with your friends