一步一步学习 ReactNative + Redux（4:中间件）

写在开始

在前面，我们的 TODO 应用都是使用的同步操作。但是，一个应用肯定要有异步操作，例如获取远程数据。
这一节，我们将开始使用异步操作。http://www.jianshu.com/p/109972339b54

源码：https://github.com/eylu/web-lib/tree/master/ReactReduxDemo/app_step4

案例

我们在这里将会模拟一个一步操作：使用 setTimeout， 点击 TODO 项，等待2秒钟之后，将 TODO 项的状态status更改。

1、修改 Action

也许你会想到，这太简单了，将 changeTodoStatus 这个 ActionCreator 加上一个 setTimeout，不就可以了吗？如下：

export function changeTodoStatus(id){    return {type: TOGGLE_TODO_STATUS, id};};修改为如下：export function changeTodoStatus(id){            setTimeout(()=>{                          // 延迟执行        return {type: TOGGLE_TODO_STATUS, id};    }, 2000);}

运行项目，它报错了！！！

这是因为，我们的 ActionCreator 需要返回一个 Object 对象，但是，现在返回 undefined。

我们需要变通，返回一个方法并且接受一个 diapatch 参数，在此 ActionCreator 内部执行 dispatch(action)。
事实上，是可以的（需要中间件，稍后会用到），这是一个好的想法。

export function changeTodoStatus(id){    return function (dispatch){                        // return 一个 function        setTimeout(()=>{                               // 延迟执行            dispatch({type: TOGGLE_TODO_STATUS, id});  // action 内部 dispatch 了 action        }, 2000);    }    // return {type: TOGGLE_TODO_STATUS, id};}

它还不能运行，我们需要使用中间件。它类似于这样：

var thunkMiddleware = function ({ dispatch, getState }) {    // console.log('Enter thunkMiddleware');    return function(next) {        // console.log('－－－－－－－－》 Function "next" provided:', next);        return function (action) {            // console.log('－－－－－－－－》 Handling action:', action);            return typeof action === 'function' ?                action(dispatch, getState) :                next(action)        }    }}

并且需要使用 redux 的 applyMiddleware 将中间件与 redux 应用到一起。

开发

前面，对中间件做了简单介绍，接下来，我们开发使用。

1、修改 ActionCreator

ActionCreator 是可以有副作用的，例如路由、调取远程数据。这里，我们只是延迟了调用，模拟调取远程数据。

ReactReduxDemo/app/actions/index.js 文件，修改如下：

/*********************************** action 类型常量 *************************************//** * 更改 TODO 状态 * @type {String} */export const TOGGLE_TODO_STATUS = 'TOGGLE_TODO_STATUS';export const ADD_NEW_TODO = 'ADD_NEW_TODO';export const SET_FILTER = 'SET_FILTER';/*********************************** action 创建函数 *************************************//** * 更改 TODO 状态 * @param  {Number} id TODO索引 * @return {Object}       action */export function changeTodoStatus(id){    return function (dispatch){                        // return 一个 function        setTimeout(()=>{                               // 延迟执行            dispatch({type: TOGGLE_TODO_STATUS, id});  // action 内部 dispatch 了 action        }, 2000);    }    // return {type: TOGGLE_TODO_STATUS, id};}export function addNewTodo(text){    return {type: ADD_NEW_TODO, text};}export function filterTodoList(filter){            return {type: SET_FILTER, filter};            };

2、应用中间件

异步 Action 已写好，我们需要使用中间件来调用。并且需要 applyMiddleware 将中间件应用到 redux 。

ReactReduxDemo/app/index.js 文件，修改如下：

import React, { Component } from 'react';import {    View,    StyleSheet,} from 'react-native';import { createStore, applyMiddleware } from 'redux';           // 引入 redux 的 applyMiddlewareimport { Provider } from 'react-redux';import { FILITER_KEYS } from './config/enum';import reducers from './reducers/index';import HomeContainer from './containers/home.container';var thunkMiddleware = function ({ dispatch, getState }) {        // 定义中间件    // console.log('Enter thunkMiddleware');    return function(next) {        // console.log('－－－－－－－－》 Function "next" provided:', next);        return function (action) {            // console.log('－－－－－－－－》 Handling action:', action);            return typeof action === 'function' ?                action(dispatch, getState) :                next(action)        }    }}// 这是初始数据const initState = {    todos: [        {id:1,title:'吃早饭',status:true},        {id:2,title:'打篮球',status:false},        {id:3,title:'修电脑',status:false},    ],    filter: FILITER_KEYS.ALL,};const finalCreateStore = applyMiddleware(thunkMiddleware)(createStore);   // applyMiddleware 将中间件与 createStore 应用在一起，并返回一个 createStorelet store = finalCreateStore(reducers, initState);                        // 使用新的 createStore 创建 store// let store = createStore(reducers, initState);export default class RootWrapper extends Component{    render(){        return (            <Provider store={store}>                <View style={styles.wrapper}>                    <HomeContainer />                </View>            </Provider>        );    }}const styles = StyleSheet.create({    wrapper: {        flex: 1,        marginTop: 20,    },});

运行项目，它的显示没什么特别，点击 TODO ，看看是否需要等待一段时间才能显示新的 TODO 状态呢 ？
ok，没问题，与我们的预期是一样的。

下篇，我们会使用中间件异步调取远程数据。