Redux-thunk
import axios from 'axios';
import {
ISLOADING,
ERRORS,
GETDATA
}from '../constants/actionTypes'
let request = (type, params) => {return {type, params}}
let receive = (type, data) => {return {type, data}}
export function getList(params){
return async dispatch => {
dispatch(request(ISLOADING,params))
try {
let res = await axios.post('localhost:8080/getdatas',params)
dispatch(receive(GETDATA,{payload:res})
}catch (err){
dispatch(receive(ERRORS, {status: 2, errmsg: '数据错误'}))
}
}
}
上面代码中，getList是一个Action Creator（动作生成器），返回一个函数。这个函数执行后，先发出一个Action（request(ISLOADING,params)），然后进行异步操作。拿到结果后，然后再发出一个 Action（receive(GETDATA,{payload:res}）。
getList返回了一个函数，而普通的 Action Creator 默认返回一个对象。
使用Redux-thunk
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducers';
const store = createStore(
reducer,
applyMiddleware(thunk)
);
上面代码使用redux-thunk中间件，改造store.dispatch，使得后者可以接受函数作为参数。
使用redux-thunk的最大问题就是太复杂了，重复的模板代码太多。
redux-promise
由于redux-thunk写起来实在是太麻烦了，redux-promise出现了，
它自定义了一个middleware，当检测到有action的payload属性是Promise对象时，就会：
若resolve，触发一个此action的拷贝，但payload为promise的value，并设status属性为”success”
若reject，触发一个此action的拷贝，但payload为promise的reason，并设status属性为”error”
import axios from 'axios';
import {
GETDATA
} from '../constants/actionTypes'
let request = (type, params) => {return {type, params}}
let receive = (type, data) => {return {type, data}}
export function getList(params){
return {
type: GETDATA,
payload: axios.post(url,params)
}
}
代码量明显减少。
redux-promise虽然在代码量上减少，但是，它太过精简了，结果我们不能在拿到数据前，做任何操作。
使用redux-thunk，在请求数据前，先发一个action，我们可以根据这个action做出操作，但是promise却不行。
最初触发的action被中间件拦截然后过滤掉了。原因很简单，redux认可的action对象是简单对象，而在redux-promise中，初始action的payload是个Promise。
redux-promise-middleware
redux-promise-middleware相比redux-promise，采取了更为温和和渐进式的思路，保留了和redux-thunk类似的三个action。
import axios from 'axios';
import {
GETDATA
} from '../constants/actionTypes'
let request = (type, params) => {return {type, params}}
let receive = (type, data) => {return {type, data}}
export function getList(params){
return {
type: GETDATA,
payload: {
promise: axios.post(url,params)
}
}
}
reduces:
const reducer = function(state, action) {
switch(action.type) {
case GET_DATA_PENDING :
return state;
case GET_DATA_FULFILLED :
return {
...state,
isInitialized: true
};
case GET_DATA_REJECTED :
return {
...state,
isInitialized: false
};
}
}
redux-promise-middleware,为action提供了三个type，_PENDING、_FULFILLED、_REJECTED，代表了不同状态。
它的遗憾则是只在action层实现了简化，对reducer层则束手无策。另外，相比redux-thunk，它还多出了一个_PENDING的字符串模板代码(三个action却需要四个type)。
