一、背景
本人接触RN时间很短，所以觉得Redux + React Navigation有点复杂
因为Redux是自顶向下管理一套状态，React Navigation也是自顶向下管理一套状态甚至页面，这俩融合起来就有点困难了
好在有一篇大牛文章A comprehensive guide for integrating React-Navigation with Redux including authentication flow以及他的项目GitHub，写的非常好，例子也非常好，但是痛点是太旧了，得重新加工，我也写了个demo
二、关键模块描述
要想撮合Redux和React Navigation(为了方便描述，后面就直接称呼为导航)，就得先了解各自，Redux可以看我上一篇文章，后者看官方网站就可以了
原博的内容是随着介绍新方法展开的，但是我觉得这样入门阶梯太陡峭，我将从搭建项目的顺序讲解。
而且这里只讲原理，不讲细节，细节请看我的demo
先来个图概览一下，后面也是按照这个图讲：
（这个是我呕心沥血原创的图哦，禁止盗版）
这张是我总结的大牛文章的结构图，画了一下午，后来发现太旧了，不得不重新画了第二张
大牛文章示意图
这张是我的demo的示意图，引入了react-navigation-redux-helpers，是目前最新的实现，其中redux部分的实现有两种，一种是自定义reducer，一种是使用react-navigation-redux-helpers里提供的方法生成reducer
新示意图
1. 搭建Redux组件部分
想将两者融合，其实是将导航塞在Redux中，所以我们第一步是完成Redux框架的搭建。
a .首先创建两个页面，Screen1和Screen2，然后使用导航API放到导航堆栈里(StackNavigator)
const NavigationStack = StackNavigator({
screen1: {
screen: FirstPage
},
screen2: {
screen: SecondPage
}
})
export default NavigationStack
b.使用reduxifyNavigator方法，将NavigationStack封装成高阶组件AppNavigation，这个高阶组件完成了navigation prop的替换，改成了使用redux里的navigation。
const AppNavigation = reduxifyNavigator(NavigationStack, 'root')
c.然后使用Redux的connect函数再封装一个高阶组件，mapStateToProps一会再讲。
const mapStateToProps = state => {
return {
state: state.nav
}
}
const HighOrderAppNavigation = connect(mapStateToProps)(AppNavigation)
d.最后通过Provider组件，配置store prop，封装上面的高阶组件。
render () {
return (
<Provider store={store2}>
<HighOrderAppNavigation />
</Provider>
)
}
这样就使得Redux把根组件包装起来了，最后注册Provider封装起来的组件到RN就可以了
2. 搭建store部分
Redux通过store统一保存app的各种state，所以Redux融合导航，就是将导航状态交给Redux的store处理，也就是创建一个导航的Reducer，来处理导航state。
2.1 创建reducer方法1
创建Reducer分这么几步：创建默认状态，创建响应action的纯函数，导出纯函数。这里面和导航相关的，其实就是创建状态和更新状态。
这个融合恶心也就恶心在这了，Redux有他的state和action，React Navigation也有他的state和action
- Redux的state是业务的状态，这点导航的state是符合的，表示导航的状态，也就是目前有几个页面，按啥顺序排，当前是啥页面。
- Redux的action是组件被人触发时发送的对象，reducer接收action并生成新的state。
React Navigation的action是指的准备打开某个页面的动作，是一个意图。这个意图在实现以前叫action，实现以后就合并到React Navigation的state里了。比如像打开screen2:
const ActionForScreen2 = AppNavigator.router.getActionForPathAndParams("screen2");
//也可以用 NavigationActions.navigate({routeName:'screen2'})
第一个参数是页面的key，在StackNavigator里填的那个，第二个是你想传的参数params，本例不需要参数
上面的代码创建了一个导航action(表示我想打开screen2页面)，那么我们就可以通过action创建导航state，通过方法getStateForAction(action, oldNavigationState)
俩参数，一个是新的action，一个是当前的导航state，返回新的状态，当没有办法执行这个action的时候，就返回null。
比如app刚启动只有一个页面screen1，那么导航reducer的初始状态就是下面这个样子的
const initialState = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('screen1'))
默认只有一个参数action，是根页面，因为没有更旧的state了。
但是当我们点击了一个按钮，推入了screen2页面，这时候新的状态就是：
const ActionForScreen2 = AppNavigator.router.getActionForPathAndParams("screen2");
const newNavigationState = AppNavigator.router.getStateForAction(ActionForScreen2, initialState)
这两行代码，就是导航reducer的纯函数，在接收到对应的redux action以后需要做的。将newNavigationState返回给store，就完成了导航状态的更新，React Navigation就会根据导航action和state推入新的页面。
完整reducer代码:
const ActionForFirstPage = NavigationStack.router.getActionForPathAndParams(
'screen1'
)
const ActionForSecondPage = NavigationStack.router.getActionForPathAndParams(
'screen2'
)
const initialState = NavigationStack.router.getStateForAction(ActionForFirstPage)
const navReducer = (state = initialState, action) => { //reducer函数
switch (action.type) {
case ACTION_NEXT: {
return NavigationStack.router.getStateForAction(ActionForSecondPage, state)
}
case 'Navigation/BACK': {
return NavigationStack.router.getStateForAction(NavigationActions.back(), state)
}
}
return state
}
2.2 创建reducer方法2
上面创建reducer方法还是有些复杂的，所以在最新的react-navigation-redux-helpers中提供了一个方法createNavigationReducer用来生成上面的reducer，缺点就是不灵活
const navReducer = createNavigationReducer(NavigationStack)
当然，只创建reducer还是没法正常使用的，还得对组件进行改造，把刚刚没写的一些组件的内容写完
3. Redux组件改造
a. 映射导航状态到组件props
也就是实现connect函数里需要传的mapStateToProps，这是一个方法，接收所有reducer的总state，返回一个state对象，Redux将这个state的内容放到connect包含的AppNavigation组件的props里。本例AppNavigation下的所有组件都能访问到这个props了，那么React Navigation就可以正确摆放页面顺序了。
const mapStateToProps = state => {
return {
state: state.nav
}
}
b. 创建导航中间件
reduxifyNavigator把导航状态放到props里只是能被各个组件访问到，但是React Navigation还不能识别，所以还需要最后一步——创建一个中间件，把需要导航的组件与导航reducer连接起来
const middleware = createReactNavigationReduxMiddleware(
'root',
state => state.nav
)
这里的root，reduxifyNavigator里也是root，这俩名字必须相同，才能对应上
三、Redux action
redux的跳转页面的action，和其他的redux action没有差别，就是dispatch一个对象，对象有一个type的key。
this.props.goNext()
如果第二节创建reducer的时候，你采用了方法2，也就是用的createNavigationReducer创建的reducer，那么显然是没法响应自定义的redux action的，可以这么跳转：
this.props.navigation.push('screen2')
这就是react navigation的标准用法了
四、结尾
终于把外国大牛的文章看懂了，希望我转述的能提供帮助，看本文的时候最好对照外国大牛的代码看，
为了弄清这个逻辑，在iPad上画了好多草图，也给大家贴上，使用iPad+Apple pencil事半功倍～～
草图1
草图2
网友评论