写在开始
在前面，我们的 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，没问题，与我们的预期是一样的。
下篇，我们会使用中间件异步调取远程数据。
