上篇文章提到如何集成一个高可配置的 react-navigation,本篇文章接上次继续集成 redux
No.1 添加依赖
yarn add redux
yarn add react-redux
yarn add -D @types/react-redux(如用 typeScript,添加)
yarn add redux-thunk
yarn add redux-devtools
No.2 创建 reducer文件夹下创建 index.js 文件添加如下配置
import { combineReducers } from 'redux'
import { rootCom, RootNavigator } from '../../route/app.navigation'
- No.3 在 app.navigation 中添加 Middleware和修改一下内容
import { createReactNavigationReduxMiddleware, createReduxContainer } from 'react-navigation-redux-helpers'
// createReactNavigationReduxMiddleware 这是一个 redux 的容器export const Middleware = createReactNavigationReduxMiddleware( state => state['nav'], Root)// createReduxContainer 返回一个可用在导航中的函数const AppWithNavigationState = createReduxContainer(RootNavigator, Root)// 初始化一个 state 的存储对象const MapStateToProps = (state: any) => ({ state: state.nav})const NewRootNavigator: any = connect(MapStateToProps)(AppWithNavigationState)const TestWrap = createAppContainer(NewRootNavigator)export default TestWrap
以下为完整版 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 } }})export const RootNavigator = createSwitchNavigator( { Start: StartNavigator, Index: IndexNavigator }, { initialRouteName: rootCom })// createReactNavigationReduxMiddleware 这是一个 redux 的容器export const Middleware = createReactNavigationReduxMiddleware( state => state['nav'], Root)// createReduxContainer 返回一个可用在导航中的函数const AppWithNavigationState = createReduxContainer(RootNavigator, Root)// 初始化一个 state 的存储对象const MapStateToProps = (state: any) => ({ state: state.nav})const NewRootNavigator: any = connect(MapStateToProps)(AppWithNavigationState)const TestWrap = createAppContainer(NewRootNavigator)export default TestWrap
No.4 创建 store 中间件
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) => { if (typeof action === 'function') { // console.log('action', next(action)) } else { // console.log('error') } const result = next(action)}const middlewares = [ Middleware, logger, thunk]// 创建 storeexport default createStore(reducer, applyMiddleware(...middlewares))
No.5 修改 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 App
集成 redux 就完成啦!