React--Redux异步流

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)。