Integrating Redux + React Navigation 3.x

Let me assume that all of you know what is redux and the sole purpose of it. So without any other introduction or boring paragraphs lets integrate redux with React-navigation 3.x. This arcticle doesn’t contain adding actions and reducers of the app. It will be in the next series.

1. Install redux

yarn add redux react-redux
OR
npm install --save redux react-redux

You don’t have to do react-native link as this is not a native module.

2. Install react-navigation-redux-helpers module

yarn add react-navigation-redux-helpers
or
npm install --save react-navigation-redux-helpers

3. Create the store folder structure like below

4. Configure and create your redux store in configureStore.js file

configureStore.js

const navReducer = createNavigationReducer(AppNavigator);

• Call createNavigationReducer in the global scope to construct a navigation reducer.
• Param AppNavigator is your root navigator (React component).
• Call this reducer from your master reducer, or combine using combineReducers.
• Remaining code is the same steps which we add while integrating redux. If you are making any asynchronous call, don’t forget to add the middleware ‘Thunk’ or ‘Redux-Saga’

5. Modify your App.js file like below

App.js

const AppConatiner = createReduxContainer(AppNavigator);

• createReduxContainer returns a HOC (higher-order component) that wraps your root navigator.
• Param navigator is your root navigator (React component).
• Returns a component to use in place of your root navigator. Pass it state and dispatch props that you get via react-redux's connect.

6. Create a ReduxNavigation.js file

ReactNavigation.js

This file can be used as a connector to pass state and dispatch props to App.js

7. Now edit your index.js file with the ReduxNavigation component

That’s it. We have integrated Redux to our React-native application. If we are using react-navigation as your router, then only these integration steps will work for you.

If you need any explanation on the above steps, please let me know in the comment box. Also please don’t forget to clap for the article. Let it reach the needy. Thank you.

pc:google