一、背景
本人接觸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事半功倍～～
