react native redux saga增加日志功能

redux-logger地址：https://github.com/evgenyrodionov/redux-logger

目前Reac native项目中已经使用redux功能，异步中间件使用redux saga，但在处理时，也需要增加redux打印日志的功能，所以需要增加redux-logger功能

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome'

//router
import { Router, Scene, Tabs } from 'react-native-router-flux';

//redux
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';

//redux logger
import logger from 'redux-logger';

//reducers 
import allReducers from './src/reducers';

//containers
import HomeContainer from './src/containers/HomeContainer';
import OrderContainer from './src/containers/OrderContainer';
import MainContainer from './src/containers/MainContainer';
//user containers
import UserLoginContainer from './src/containers/user/UserLoginContainer';
import UserRegisterContainer from './src/containers/user/UserRegisterContainer';
//check containers
import StyleCheckContainer from './src/containers/check/StyleCheckContainer';
import HandmadeCheckContainer from './src/containers/check/HandmadeCheckContainer';
import SizeCheckContainer from './src/containers/check/SizeCheckContainer';
import FittingCheckContainer from './src/containers/check/FittingCheckContainer';
//storage
import storage from './src/util/tqsStorage';

//mutil language
import I18n from './src/config/i18n';

//saga
import createSagaMiddleware from 'redux-saga';
import rootSaga from './src/sagas/rootSaga';

const sagaMiddleware = createSagaMiddleware();
let store = createStore(allReducers, applyMiddleware(logger,sagaMiddleware));

//run all saga function
sagaMiddleware.run(rootSaga);

export default class App extends Component<{}> {
  constructor(props) {
    super(props);
    this.state = {
    }
  }
  componentDidMount() {
  }
  render() {
    return (
      <Provider store={store}>
        <Router>
          <Scene key='root'>
            <Scene key='UserLogin' component={UserLoginContainer} title={I18n.t('App.UserLogin_Title')} initial={true} hideNavBar={true} />
            <Scene key='UserRegister' component={UserRegisterContainer} title={I18n.t('App.UserRegister_Title')} />
            <Scene key='Home' component={HomeContainer} title={I18n.t('App.Home_Title')} hideNavBar={true} />
            <Scene key='Order' component={OrderContainer} title={I18n.t('App.Order_Title')} hideNavBar={true} />
            <Scene key='Main' component={MainContainer} title={I18n.t('App.Main_Title')} hideNavBar={true} />

            <Scene key='StyleCheck' component={StyleCheckContainer} title={I18n.t('App.StyleCheck_Title')} hideNavBar={true} />
            <Scene key='HandmadeCheck' component={HandmadeCheckContainer} title={I18n.t('App.HandmadeCheck_Title')} hideNavBar={true} />
            {/* <Scene key='FittingCheck' component={FittingCheckContainer} title={I18n.t('App.UserRegister_Title')} hideNavBar={true} />
            <Scene key='FittingCheck' component={FittingCheckContainer} title={I18n.t('App.UserRegister_Title')} hideNavBar={true} /> */}
            <Scene key='SizeCheck' component={SizeCheckContainer} title={I18n.t('App.SizeCheck_Title')} hideNavBar={true} />
            <Scene key='FittingCheck' component={FittingCheckContainer} title={I18n.t('App.FittingCheck_Title')} hideNavBar={true} />
          </Scene>
        </Router>
      </Provider>
    );
  }
}

运行时，打开远程调试，可以在Chrome开发工具中看到日志信息

有了日志功能后，可以比较简单的查看到action的type及其他参数，也可以看到每一个action发生前与发生后state(reducers)的变化