德州网站建设维护看广告赚钱一天50元

写在开始

在前面，我们的 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 一个 functionsetTimeout(()=>{                               // 延迟执行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 一个 functionsetTimeout(()=>{                               // 延迟执行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，没问题，与我们的预期是一样的。

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