redux异步action_react-redux--异步Action

上两篇文章叙述的都是同步操作，每当 dispatch action 时，state 会被立即更新。但是实际应用中，我们有很多操作执行后，过一段时间，才会得到结果。那么怎么处理这种情况呢？

先熟悉一个概念

中间件

本质就是一个通用函数，可以在程序的任何执行处介入，从而将处理方法扩展到现有系统上。

在store.dispatch(action) 执行时候，打印日志，这就是一个简单的中间件

let next = store.dispatch;

store.dispatch = action => {

next(action);

console.log('state after dispatch', getState())

}

引入中间件 redux-thunk

redux-thunk中间件,允许action creator返回一个函数，这个函数会接收dispath和getState？为参数。

看下面三种不同的action

const INCREMENT_COUNTER = 'INCREMENT_COUNTER';

普通的,返回一个对象

function increment() {

return {

type: INCREMENT_COUNTER

};

}

异步的，返回一个函数

function incrementAsync() {

return dispatch => {

setTimeout(() => {

// Yay! Can invoke sync or async actions with `dispatch`

dispatch(increment());

}, 1000);

};

}

带条件的，返回一个函数

function incrementIfOdd() {

return (dispatch, getState) => {

const { counter } = getState();

if (counter % 2 === 0) {

return;

}

dispatch(increment());

};

}

使用中间件 redux-thunk

需求：

进入页面之后，点击某个按钮，获取用户投资总额。。。

分析：

异步请求有3个关键action

开始请求--一般用于呈现加载进度条

请求成功--关闭进度条，加载数据

请求失败--关闭进度条，展示错误信息

import { createStore, applyMiddleware } from 'redux';

import thunk from 'redux-thunk'; //导入thunk

import rootReducer from './reducers/index';

// Note: this API requires redux@>=3.1.0

const store = createStore(

rootReducer,

applyMiddleware(thunk)//激活thunk中间件

);

//一个异步请求

function fetchAmount() {

return fetch('https://www.renrendai.com/getAmount?userId=123')

}

//通知 reducer 请求开始的 action

requestPost(){

return{

type: REQUEST_POSTS,

isFetch:true //进度条相关

}

}

//通知 reducer 请求成功的 action

receviePostOnSuccess( data){

return{

type: RECEIVE_POSTS,

isFetch:false,

amount: data.amount

}

}

//通知 reducer 请求失败的 action。

receviePostOnError( message){

return{

type: RECEIVE_POSTS,

isFetch:false,

errorMsg:message

}

}

//异步请求action 【将上面3个基础的action整合】

function getAmount(){

retrun (dispath)=>{

// 首次 dispatch：更新应用的 state 来通知API 请求发起了

dispatch(requestPosts())

//异步请求后端接口

return fetchAmount().then(

data=>dispath(receviePostOnSuccess(data)),

error=> dispatch(receviePostOnError('error))

)

}

}

也很容易理解吧~~~

本文档是将最基础的使用方法提炼呈现，真正的react-redux博大精深，如果想继续深究，就赶紧找一个简单的项目开始练手吧。

参考文档：