rn+redux+immutable+saga+react-navigation技术栈

1:安装组件package如下：

"dependencies": {
        "immutable": "^3.8.2",
        "react": "16.0.0-beta.5",
        "react-native": "0.49.3",
        "react-navigation": "^1.0.0-beta.15",
        "react-redux": "^5.0.6",
        "redux": "^3.7.2",
        "redux-logger": "^3.0.6",
        "redux-saga": "^0.15.6"
    },

2:index引入根文件:

import { AppRegistry } from 'react-native';
import App from './app/root'
AppRegistry.registerComponent('xxx', () => App);

3:root =>’./app/root’文件如下

/**
 * Created by wuyunqiang on 2017/10/9.
 */
import React from 'react';
import { Provider,connect } from 'react-redux';
import { StackNavigator,TabNavigator,addNavigationHelpers,NavigationActions} from 'react-navigation';
import configureStore from './store/configure-store';//配置reduce
import rootSaga from './sagas/index';//配置sagas异步操作
import AppNavigator from './router'
const store = configureStore();
GLOBAL.Log = console.log;
store.runSaga(rootSaga);//配置数据通过saga获取 然后通过reduce返回存储到store中 store作为唯一数据源
class NavigatorView extends React.Component {
    render (){
        //react-navigation与redux集成
        return (<AppNavigator navigation={addNavigationHelpers({dispatch: this.props.dispatch, state: this.props.nav
            })}/>)
    }
}
/**
 * 注入数据流
 * **/
const mapStateToProps = state => ({
    nav: state.nav,
});
const AppWithNavigationState =  connect(mapStateToProps)(NavigatorView);
const Root = () => (<Provider store={store}>
    <AppWithNavigationState/>
</Provider>);
export default Root;

4：configure-store =>’./store/configure-store’
配置reduce数据

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware, { END } from 'redux-saga';
import rootReducer from '../reducers/index';//引入根reduce
const middlewares = [];//中间插件
const { logger } = require('redux-logger');
// configuring saga middleware
const sagaMiddleware = createSagaMiddleware();
middlewares.push(sagaMiddleware);//放入saga中间插件
/* global __DEV__  */
if (__DEV__) {
  middlewares.push(logger);
}
const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore);
export default function configureStore(initialState) {
  const store = createStoreWithMiddleware(rootReducer, initialState);
  // install saga run
  store.runSaga = sagaMiddleware.run;
  store.close = () => store.dispatch(END);
  return store;
}

5：/reducers/index =>rootReducer如下配置：

import { combineReducers } from 'redux';
import home from './home';
import xxx from './xxx';
const rootReducer = combineReducers({
    nav:navigator,
    home
});
export default rootReducer;

6:reducers/home里面引入immutable如下方式

/**
 * Created by wuyunqiang on 2017/10/10.
 */
import { Map,is,fromJS } from 'immutable';
const initialState = Map({//初始化数据
    isRefreshing: false,
    loading: true,
    isLoadMore: false,
    noMore: false,
    data: fromJS({}),
    url:'',
    params:{},
    clickAd:false,
});
export default function home(state = initialState, action) {
    switch (action.type) {
        case ActionTypes.HOME_FETCH://网络获取数据
            return state
                .set('isRefreshing',true)
                .set('loading',true)
                .set('isLoadMore',action.isLoadMore);
        case ActionTypes.HOME_RECEIVE:
            const map1 = fromJS(action.data.result);//网络获取
            const map2 = state.get('data');//本地已经有的数据
            console.log('是否更新 reduce',!is(map1,map2));
            if(is(map1,map2)){
                return state
                    .set('isRefreshing',false)
                    .set('loading',false)
                    .set('isLoadMore',false);
            }
            return state
                .set('data',map1)
                .set('isRefreshing',false)
                .set('loading',false)
                .set('isLoadMore',false);
        case ActionTypes.HOME_NOTIFICATION://点击事件
            return state.set('clickAd',!state.get('clickAd'));
        default:
            return state;
    }
}

7：reudcers/navigator 配置react-navigation的reudcer

import AppNavigator from '../router';
export default function navigator(state, action) {
    console.log('navigator reduce',state,'action',action);
    const newState = AppNavigator.router.getStateForAction(action, state);
    return newState || state;
}

8：actions/home

/**
 * Created by wuyunqiang on 2017/10/10.
 */
//请求数据的前发送的action
export function fetchData(isRefreshing , loading, isLoadMore = false) {
    console.log('ActionTypes.HOME_FETCH');
    return {
        type: ActionTypes.HOME_FETCH,
        isRefreshing,
        loading,
        isLoadMore
    };
}
//请求结束 发送action
export function receiveData(data) {
    console.log('ActionTypes.HOME_RECEIVE');
    return {
        type: ActionTypes.HOME_RECEIVE,
        data,
    };
}
//请求数据的action
export function requestData(url,params){
    console.log('ActionTypes.HOME_REQUEST');
    console.log('home url',url);
    console.log('home params',params);
    return {
        type: ActionTypes.HOME_REQUEST,
        url,
        params
    };
}
//请求数据的action
export function ClickNotification(){
    return {
        type: ActionTypes.HOME_NOTIFICATION,
    };
}

9：’./sagas/index’ =>rootSaga

import { fork } from 'redux-saga/effects';
import { watchRequestData } from './project';
export default function* rootSaga() {
  // yield [fork(watchRequestTypeList), fork(watchRequestArticleList)];
    yield [fork(watchRequestData)];//监听网络请求
}

完成。
不得不说一套配置过后，可以获取到react navigation的路由这个对于返回任意页的问题可以得到解决，而且整体的性能也是好的很多尤其的immutable的作用很明显。
有什么问题欢迎各位补充。
GitHub：https://github.com/wuyunqiang/ReactNativeUtil/issues
这是本人准备做的一个工具,以及bug的库。希望以后内容可以越来越丰富，会陆续补充在工作中遇到的有关react native的问题，欢迎大家将遇到的问题以及解决方法以issue的方式写下来做个记录。