How to integrate a highly configurable React-Navigation with redux

No.1 Adding dependencies

Yarn add redux yarn add react-redux yarn add -d @types/react-redux(for example, in typeScript) yarn add redux-thunk yarn add redux-devtoolsCopy the code

Create the index.js file in the Reducer folder. Add the following configuration

import { combineReducers } from 'redux'
import { rootCom, RootNavigator } from '.. /.. /route/app.navigation'
RootCom RootNavigator
/ / specify the default stateconst navState = RootNavigator. The router. GetStateForAction ( RootNavigator.router.getActionForPathAndParams(rootCom))

// Create your own Navigator reducerConst navReducer = (state = navState, action: Any) = > {/ / the next state const nextState = RootNavigator. The router. GetStateForAction (action, state) return nextState || state}

Cominereducers = cominereducers ({nav: navreducers,})

// Expose export default rootReducerCopy the code

  • No.3 Add Middleware and modify content in app. Navigation

import { createReactNavigationReduxMiddleware, createReduxContainer } from 'react-navigation-redux-helpers'/ / createReactNavigationReduxMiddleware this is a story of the containerexport const Middleware = createReactNavigationReduxMiddleware(  state => state['nav'], Root)// createReduxContainer returns a function available in navigation const AppWithNavigationState = createReduxContainer(RootNavigator, Root)// Initialize a state store object const MapStateToProps = (state: any) => ({state: state.nav})const NewRootNavigator: any = connect(MapStateToProps)(AppWithNavigationState)const TestWrap = createAppContainer(NewRootNavigator)export default TestWrapCopy the code

Below is the full app. Navigation 

import { createStackNavigator } from 'react-navigation-stack'import { createSwitchNavigator, createAppContainer } from 'react-navigation'import { createReactNavigationReduxMiddleware, createReduxContainer } from 'react-navigation-redux-helpers'import { connect } from 'react-redux'import IndexTabs from '.. /pages/tabs/index.tabs'import StartIndex from '.. /pages/start/index'import _Test from './modules/test'export const rootCom = 'Start'const Root = 'root'const IndexNavigator = createStackNavigator({ IndexTabs: { screen: IndexTabs, }, ... _Test}, { initialRouteName:'IndexTabs',  defaultNavigationOptions: {    header: null  }})const StartNavigator = createStackNavigator({  StartIndex: {    screen: StartIndex,    navigationOptions: {      header: null    }  }})exportconst RootNavigator = createSwitchNavigator( { Start: StartNavigator, Index: IndexNavigator }, { initialRouteName: RootCom}) / / createReactNavigationReduxMiddleware this is a story of the containerexport const Middleware = createReactNavigationReduxMiddleware(  state => state['nav'], Root)// createReduxContainer returns a function available in navigation const AppWithNavigationState = createReduxContainer(RootNavigator, Root)// Initialize a state store object const MapStateToProps = (state: any) => ({state: state.nav})const NewRootNavigator: any = connect(MapStateToProps)(AppWithNavigationState)const TestWrap = createAppContainer(NewRootNavigator)export default TestWrapCopy the code

No.4 Creating store Middleware

import { applyMiddleware, createStore } from 'redux'import reducer from './reducer'import thunk from 'redux-thunk'import { Middleware } from '.. /route/app.navigation'Const Logger = (Store: any) => (next: any) => (action: any) => {const logger = (store: any) => (next: any) => (action: any) => {if (typeof action === 'function') {    // console.log('action', next(action))  } else {    // console.log('error') } const result = next(action)}const middlewares = [ Middleware, logger, Thunk]// Create storeExport default createStore(reducer, applyMiddleware(... middlewares))Copy the code

No. 5 modified app. Js

import React, { Component, Fragment } from 'react'; import { Provider } from'react-redux'import store from './redux'import RootNavigator from './route/app.navigation'class App extends Component<any, any> {  constructor(props: any) {    super(props)  }  render() {    return (      <Fragment>        <Provider store = {store}>          <RootNavigator />        </Provider>      </Fragment>    )  }}export default AppCopy the code

The redux integration is complete!