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

写在开始

在前面，我们的 TODO 应用都是使用的同步操作。但是，一个应用肯定要有异步操作，例如获取远程数据。
这一节，我们将开始使用异步操作。

源码：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 的 applyMiddleware
import { 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 应用在一起，并返回一个 createStore
let 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，没问题，与我们的预期是一样的。

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