react-navigation 2.x与redux 整合记录

写在前面

最近一直在学习react-native相关知识点，因需要使用react-navigation与redux集成，因此看了react-navigation官网关于redux集成的简单demo，但是因为是写在同一个文件内，不利于理解与维护，因此，单独分离出来到每个文件。在网上搜了很多帖子，发现时间都比较长远，并且很多都是1.x版本的集成方案，对最新的react-navigation 2.x版本来说，相关帖子感觉比较少，因此将其记录下来。如有错误，请多多指教。
（ps: 默认大家对于redux都很熟悉,不再介绍redux的相关知识）

相关插件及版本

    "react": "16.6.0-alpha.8af6728",
    "react-native": "0.57.4",
    "react-navigation": "^2.18.2",
    "react-navigation-redux-helpers": "^2.0.8",
    "react-redux": "^5.1.1",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6"  

主要文件及目录

project
│   App.js
│   index.js  
└─── src
       └─── store  
       │      │   index.js
       └─── reducers
       │      │   index.js
       │      └───  Navigator
       │            │ index.js
       └─── components
              │  index .js

分步指南

1. 安装相关插件

2. components/index.js文件

根据react-navigationAPI构建的底部导航条，可根据自身需求自行使用。

const Navigator = createBottomTabNavigator(RouteConfigs, StackNavigatorConfig)

export default Navigator

3. store/index.js文件

这样处理我相信对熟悉redux的人来说，应该很容易就可以看出来，我们可以自定义middleware，利于扩展。

import {createStore, applyMiddleware} from 'redux'
import logger from 'redux-logger'
import reducers from '../Reducers'
import { createReactNavigationReduxMiddleware, } from 'react-navigation-redux-helpers';

const middlewares = []

if (process.env.NODE_ENV === 'development') {
  middlewares.push(logger)
}

const Navmiddleware = createReactNavigationReduxMiddleware(
  "root",
  state => state.nav,
);

middlewares.push(Navmiddleware)

const store = createStore(reducers, applyMiddleware(...middlewares))

export {store}

4.reducers/index.js文件

使用了combineReducers这个API，用于将拆分后 reducer 函数组成的对象，返回一个新的 Reducer 函数。同样，有利于我们继续扩展程序的Reducers。

import {combineReducers} from 'redux'
import navReducer from './Navigator'

const rootReducers = combineReducers({
  nav:navReducer,
})

export default rootReducers

5.reducers/Navigator/index.js

Navigator的内容很简单，根据官方文档直接创建一个NavigationReducer,下方的注释掉的代码，就是我在许多帖子内看到的创建Reducer的方法，但是测试时是有红屏报错的。

//import { NavigationActions } from 'react-navigation'
import Navigator from '../../components'
import { createNavigationReducer, } from 'react-navigation-redux-helpers';
// const initialState = Navigator.router.getStateForAction(NavigationActions.init())

export default navReducer = createNavigationReducer(Navigator);
// export default (state = navReducer, actions) => {
//   const nextState = Navigator.router.getStateForAction(actions, state)
//   return nextState || state
// }

结语:

以上内容仅为自己的学习过程，欢迎大家取其精华，丢其糟粕。若对以上内容有不同见解，欢迎一起探讨。
企鹅号：1041415167 邮箱地址：[email protected]