本文共 4419 字,大约阅读时间需要 14 分钟。
在前面,我们的 TODO 应用都是使用的同步操作。但是,一个应用肯定要有异步操作,例如获取远程数据。
这一节,我们将开始使用异步操作。http://www.jianshu.com/p/109972339b54
源码:
我们在这里将会模拟一个一步操作:使用 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 (); }}const styles = StyleSheet.create({ wrapper: { flex: 1, marginTop: 20, },});
运行项目,它的显示没什么特别,点击 TODO ,看看是否需要等待一段时间才能显示新的 TODO 状态呢 ?
ok,没问题,与我们的预期是一样的。
下篇,我们会使用中间件异步调取远程数据。
转载地址:http://qgeni.baihongyu.com/