react native开发Android 篇——集成redux

demo倒数日github地址：https://github.com/LiYaMei94/daysMatter_react_native

1. 安装依赖

   npm install --save redux/yarn add redux
   npm install --save react-redux/yarn add react-redux
   npm install --save redux-thunk/yarn add redux-thunk
   

2. 创建文件
   这个目录根据自己的需要自行建立，我的路径是src/redux。在redux目录下分别创建actions、reducers、store文件夹和ActionType.js文件，在每个文件下根据自己的需求建立相应的文件，以下是倒数日demo的redux文件结构。
   
   ActionType.js就是所有action的type的合集。代码如下。

   /**
    * 所有的Action的type的集合
    */
   export const DAY_ADD_SUCCESS = 'day_add_success'; 
   export const DAY_ADD_FAIL = 'day_add_fail'; 
   export const DAY_DELETE_SUCCESS = 'day_delete_success'; 
   export const DAY_DELETE_FAIL = 'day_delete_fail'; 
   

   GetDayAction.js代码如下：

   import * as TYPES from '../ActionType';
   
   const increase_success=function (){
       return {type:TYPES.DAY_ADD_SUCCESS};
   }
   const increase_fail=function (){
       return {type:TYPES.DAY_ADD_FAIL};
   }
   const delete_success=function(){
       return {type:TYPES.DAY_DELETE_SUCCESS};
   }
   const delete_fail=function(){
       return {type:TYPES.DAY_DELETE_FAIL};
   }
   export {
       increase_success,
       increase_fail,
       delete_success,
       delete_fail
   }
   

   GetDayReducer.js代码如下

   import * as TYPES from '../../ActionType.js';
   /**
    * 这里可以初始化一个默认的实体类，我的比较简单，所以initialState 是空的，可以自行定义
    */
   const initialState = {
   }
   /**
    * 在这里可以拿到action并return给IndexReducers.js进行分发。
    * 
    * 根据type判断了是从哪个action过来的数据，并进行选择性return。
    */
   export default function getWeather(state = initialState, action) {
       switch (action.type) {
           case TYPES.DAY_ADD_SUCCESS: // 添加成功
               return { message:'success' };
               break;
           case TYPES.DAY_ADD_FAIL: //添加失败
               return { message:'fail' };
               break;
           case TYPES.DAY_DELETE_SUCCESS: //删除成功
               return { message:'success' };
               break;
           case TYPES.DAY_DELETE_FAIL: //删除失败
               return { message:'fail' };
               break;
           default:
               return { message:'show' };
       }
   }
   

   需要通过IndexReducers.js来绑定所有的reducer，IndexReducers.js代码如下：

   /**
    * create by AbyssKitty on 2017/09/22
    * 事件分发 总模块
    */
    
   import { combineReducers } from 'redux';
   import GetDayReducer from './reducerItem/GetDayReducer.js';
    
   //这里面必须要有初始数据 - 否则报错
   const rootReducer = combineReducers({
       GetDayReducer,
   });
    
   export default rootReducer;
   

   store.js代码如下

   /**
    * store 的配置文件
    */
    
   import {createStore, applyMiddleware} from 'redux';
   import thunkMiddleware from 'redux-thunk';
   import rootReducer from '../reducers/IndexReducers.js';
    
   
    
   const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);
    
   export default function configureStore(initialState) {
     const store = createStoreWithMiddleware(rootReducer, initialState);
     return store;
   }
   

3. 使用redux
   在项目入口文件App.js中用react-redux的Provide包裹住整个项目，并使用store属性。

   //redux 
   import { Provider } from 'react-redux';
   import configureStore from './src/redux/store/store.js';
   const store = configureStore();//创建store
   
   //引入路由文件
   import { Router } from './src/route.js';
   const AppContainer = createAppContainer(Router);
   
   export default class App extends React.Component {
     constructor(props) {
       super(props);
       this.state = {
       }
     }
     
     render() {
       return (
         <Provider store={store}>
           <AppContainer />//这个是路由组件
         </Provider>
       )
     }
   }
   

   接收redux

   import React, { Component } from 'react';
   import { connect } from 'react-redux';
   
   class DaysScreen extends React.Component {
     //生命周期 - props发生变动时的操作，建议将回调代码在这里处理
     componentWillReceiveProps(nextProps) {
       let data = [];
       const that = this;
       if (nextProps.GetDayReducer != null) {
         if (nextProps.GetDayReducer.message == 'success') {
           //成功操作
         }
       }
     }
   }
   //在末尾加入
   function select(store) {
       return {
           GetDayReducer: store.GetDayReducer,
       }
   }
   export default connect(select)(DaysScreen);
   

   就是把这个组件用connect包裹住就能拿到store。
   注意export default已经拿到下面来了，上面的class前面的导出要删掉，DaysScreen是就是class的名字。
   GetDayReducer就是reducer集合里的名字。

   发送redux

   使用this.props.dispatch(increase_success());进行发送action，详细代码查看demo。

   import React, { Component } from 'react';
   import { connect } from 'react-redux';
   import { increase_success, increase_fail, delete_success, delete_fail } from '../redux/actions/GetDayAction.js';
   class AddDaysScreen extends React.Component {
   	...其他代码
   	updateRedux(text, arr) {
           const { dispatch, navigation } = this.props;
           const that = this;
   
           _deleteFile(fileName, function (res) {
               if (res == 1) {
                   _writeFile(fileName, JSON.stringify(arr), function () {
   
                       if (res == 1) {
                           text == 'edit' ? dispatch(increase_success()) : dispatch(delete_success());
                           navigation.push('bottomTabNavigator');
                       } else {
                           text == 'edit' ? dispatch(increase_fail()) : dispatch(delete_fail());
                           dispatch(increase_fail());
   
                       }
                   })
               } else {
   
               }
           })
       }
       ...其他代码
   }