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

推荐阅读更多精彩内容