React Navigation中整合redux

1. 安装以下package

cnpm install --save react-navigation-redux-helpers
cnpm install --save redux
cnpm install --save react-redux
cnpm install --save redux-devtools

2. App.js

import React from 'react'
import {createStackNavigator,createSwitchNavigator} from 'react-navigation'
import Welcome from './pages/Welcome'
import Home from './pages/Home'
import Detail from './pages/Detail'
import {reduxifyNavigator, createReactNavigationReduxMiddleware} from 'react-navigation-redux-helpers'
import {connect, Provider} from 'react-redux'
import store from './js/store'

const WelcomeNavigator = createStackNavigator(
    {
        Welcome:{
            screen:Welcome,
            navigationOptions:{
                header:null
            }
        }
    }
)

const StackNavigator = createStackNavigator(
    {
        Home:{
            screen: Home,
            navigationOptions:{
                header:null
            }
        },
        Detail:{
            screen:Detail,
            navigationOptions:{
                title:"详情"
            }
        }
    }
)

export const SwitchNavigator = createSwitchNavigator(
    {
        Init: WelcomeNavigator,
        Main: {
            screen:StackNavigator,
            navigationOptions: {
                header: null
            }
        }
    },
    {
        initialRouteName:"Main"
    }
)

export const middleware = createReactNavigationReduxMiddleware(
    "root",
    state => state.nav,
)
const RN = reduxifyNavigator(SwitchNavigator, "root")
const mapStateToProps = (state) => ({
    state: state.nav,
})
const AppWithNavigationState = connect(mapStateToProps)(RN)

export default class App extends React.Component{
    render(){
        return <Provider store={store}>
            <AppWithNavigationState/>
        </Provider>
    }
}

3. reducer.js

import {combineReducers} from 'redux'
import theme from './theme'
import {SwitchNavigator} from '../../App'


const initialState = SwitchNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('Init'));

const navReducer = (state = initialState, action) => {
    const nextState = SwitchNavigator.router.getStateForAction(action, state);

    // Simply return the original `state` if `nextState` is null or undefined.
    return nextState || state;
};

const index = combineReducers({
    nav:navReducer,
    theme
})
export default index

4. store.js

import {applyMiddleware, createStore} from 'redux'
import thunk from 'redux-thunk'
import reducers from '../reducer'
import {middleware} from '../../App'

const middlewares = [
    middleware
]

export default createStore(reducers,applyMiddleware(...middlewares))