react-native(Rn) 集成 redux

2,168 阅读2分钟
上篇文章提到如何集成一个高可配置的 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'
// 上篇文章集成的 rootCom RootNavigator
// 指定默认的 stateconst navState = RootNavigator.router.getStateForAction(  RootNavigator.router.getActionForPathAndParams(rootCom))

// 创建自己的 navigator reducerconst navReducer = (state = navState, action: any) => {  // 下一个 state  const nextState = RootNavigator.router.getStateForAction(action, state)  return nextState || state}

// 把创建的 reducer 合成到一个树中, combineReducers是一个纯函数,用来深度 copyconst index = combineReducers({  nav: navReducer,})

// 暴露出去export default rootReducer

  • 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 就完成啦!