Redux异步中间件

React 2020-06-23

曾经前端的革新是以Ajax的出现为分水岭，现代应用中绝大部分页面渲染会以异步流的方式进行。在Redux中，如果要发起异步请求，最合适的位置是在action creator中实现。但我们之前了解到的action都是同步情况，因此需要引入中间件让action支持异步情况，如异步action(异步请求)为一个函数,或者利用promise来完成，或者是其他自定义的形式等等，下面的middleware就是用来处理这些不同异步action(或者说成actionCreator)的.另外，在Redux社区里还有其他一些处理异步的中间件，它们大同小异，这里就不一一分析了。

redux-thunk

redux-thunk 是 redux 官方文档中用到的异步组件，实质就是一个 redux 中间件，thunk 简单来说 就是一个封装表达式的函数，封装的目的是延迟执行表达式。

redux-thunk 是一个通用的解决方案，其核心思想是让 action 可以变为一个 thunk ，这样的话:

  1. 同步情况：dispatch(action)

  2. 异步情况：dispatch(thunk)

    thunk 本质上就是一个函数，函数的参数为 dispatch,所以一个简单的 thunk 异步代码就是如下：

    this.dispatch(function (dispatch){
    setTimeout(() => {
       dispatch({type: 'THUNK_ACTION'}) 
    },1000)
})

之前已经讲过，这样的设计会导致异步逻辑放在了组件中，解决办法为抽象出一个 asyncActionCreator,这里也一样，我们就叫 thunkActionCreator 吧，上面的例子可以改为:

export function createThunkAction(payload) {
    return function(dispatch) {
        setTimeout(() => {
           dispatch({type: 'THUNK_ACTION',payload: payload}) 
        },1000)
    }
}
// someComponent.js
this.dispatch(createThunkAction(payload))

redux-thunk源码：

function createThunkMiddleware(extraArgument) {
  return ({ dispatch,getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch,getState,extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

思路：当action为函数的时候，我们并没有调用next或dispatch方法，而是返回action的调用。这里的action即为一个Thunk函数，以达到将dispatch和getState参数传递到函数内的作用。

此时，action可以写成thunk形式(ThunkActionCreator)：

function getweather(url,params){
  return (dispatch,getState)=>{
    fetch(url,params)
       .then(result=>{
          dispatch({
          type:'GET_WEATHER_SUCCESS',payload:result,});
     })
     .catch(err=>{
        dispatch({
            type:'GET_WEATHER_ERROR',error:err,});
      });
};
}

redux-promise

其实thunk我们已经有了处理异步的能力,但是每次我们要自己去手动触发三个action,工作量还是很大的。现在ajax很多都会包装为promise对象,，异步请求其实都是利用promise来完成的 因此我们可以对与dispatch增加一层判断,使得它具有处理具有promise属性的action的能力。

import {isFSA} from 'flux-standard-action';

function isPromise(val){
  return next=>action=>{
  if(!isFSA(action)){
  return isPromise(action)? action.then(dispatch):next(action);
}

return isPromise(action.payload)
 ? action.payload.then(
    result=>dispatch({...action,payload:result}),error=>{
       dispatch({...action,payload:error,error:true});
       return Promise.reject(error);
  }
 )
 : next(action);
 };
}

思路：redux-promise兼容了FSA标准（了解FSA可参考https://segmentfault.com/a/11...），也就是说将返回的结果保存在payload中。实现过程非常容易理解，即判断action或action.payload是否为promise，如果是，就执行then，返回的结果再发送一次dispatch。

此时，action可以写成promise形式(promiseActionCreator):

//利用ES7的async和awaita语法
const fetchData=(url,params)=>fetch(url,params);

async function getWeather(url,params){
  const result=await fetchData(url,params);
  
  if(result.error){
     return{
       type:'GET_WEATHER_ERROR',error:'result.error',};
    }

    return{
      type:'GET_WEATHER_SUCCESS',payload:'result'
    };
}

redux-saga

redux-saga是redux社区一个处理异步流的后起之秀，它与上述方法最直观的不同就是用generator代替了promise。的确，redux-saga是最优雅的通用解决方案，它有着灵活而强大的协程机制，可以解决任何复杂的异步交互，具体的，放在另一篇文章中详细介绍。

为action定制的自定义异步中间件

在理想情况下，我们不希望通过复杂的方法去请求数据，而是希望通过如下形式一并完成在异步请求过程中的不同状态：

{
  url:'/api/weather.json',params:{
     city:encodeURL(city),}
 type:['GET_WEATHER','GET_WEATHER_SUCCESS','GET_WEATHER_ERROR'],}

可以看到，异步请求action的格式有别于FSA。它并没有使用type属性，而使用了types属性。在请求middleware中，会对action进行格式检查，若存在url和types属性，则说明这个action是一个用于发送异步请求的action。此外，并不是所有请求都能携带参数，因此params是可选的。

const fetchMiddleware=store=>next=>action=>{
  if(!action.url || !Array.isArray(action.types)){
      return next(action);
     }
   const [LOADING,SUCCESS,ERROR]=action.types;
   
   next({
  type: LOADING,loading: true,...action,});

fetch(action.url,{params:action.params})
.then(result=>{
     next({
     type:SUCCES,loading:false,});
 })
 .catch(err=>{
      next({
         type:ERROR,laoding:false,});
 });
}

使用middleware处理复杂异步流

在实际场景中，我们不但有短连接请求，还有轮询请求、多异步串联请求，或是在异步中加入同步处理的逻辑。这时我们需要对一般异步中间件进行处理。

轮询

轮询是长连接的一种实现方式，它能够在一定时间内重新启动自身，然后再次发起请求。基于这个特性，我们可以在上一个中间件的基础上再写一个middleware，这里命名为redux-polling:

import setRafTimeout,{clearRafTimeout} from 'setRafTimeout';

export default ({dispatch,getState})=>next=>action{
  const {poolingUrl,params,types}=action;
  const isPollingAction=pollingUrl&&params&&types;
  
  if(!isPollingAction){
  return next(action);
}

let timeoutId=null;
const startPolling=(timeout=0)=>{
  timeoutId=setRafTimeout(()=>{
  const pollingAction={
  ...others,url:pollingUrl,timeoutId,};

  dispatch(pollingAction).then(data=>{
      if(data && data.interval && typeof data.interval=='number'){
      startPolling(data.interval*1000);
  }
else
  {
  console.error('pollingAction should fetch data contain interval');
  }
});
    },timeout);
                };
   startPolling();
 }
 
 export const clearPollingTimeout=(timeId)=>
   {
      if(timeoutId){
      clearRafTimeout(timeId);
   }
};

我们用到了raf函数，它可以让请求在一定时间内重新启动；startPolling函数为递归函数，这样可以，满足轮询的请求；在API的设计上，还暴露了clearPollingTimeout方法，以便我们在需要时手动停止轮询。

最后，调用action来发起轮询：

{
pollingurl:'/api/weather.json',params:{
         city:encodeURL(city),},types:[null,'GET_WEATHER-SUCCESS',null],}

对于长连接，还有其他多种实现方式，最好的方式是对其整体做一次封装，在内部实现诸如轮询和WebSocket。

多异步串联

我们可以通过promise封装来实现不论是否是异步请求，都可以通过promise来传递以达到一个统一的效果。

const sequenceMiddlware=({dispatch,getState})=>next=>action=>{
     if(!Array.isArray(action)){
          return next(action);
           }

   return action.reduce((result,currAction)=>{
      return result.then(()=>{
        return Array.isArray(currAction)?
              Promise.all(currAction.map(item=>dispatch(item))):
              dispatch(currAction)；
   });
  },Promise.resolve());
}

在构建action creator时，会传递一个数组，数组中每一个值都是按顺序执行的步骤。这里的步骤既可以是异步的，也可以是同步的。在实现过程中，我们非常巧妙地使用了Promise.resolve()来初始化action.reduce方法，然后使用Promise.then()方法串联起数组，达到了串联步骤的目的。

function getCurrCity(ip){
  return 
  {
  url:'/api/getCurrCity.json',param: {ip},types: [null,'GET_CITY_SUCCESS',}
}

return getWeather(cityId){
  return
  {
  url:'/api/getWeatherInfo.json',param:{cityId},'GET_WEATHER_SUUCCESS',}
}

function loadInitData(ip){
  return
  [
  getCurrCity(ip),(dispatch,state)=>{
  dispatch(getWeather(getCityIdWithState(state)));
      },];
}

这种方法利用了数组的特性，它已经覆盖了大部分场景，当然，如果串联过程中有不同的分支，就无能为力了。

相关文章

react初探（二）之父子组件通信、封装公共组件
一、前言 在组件方面react和Vue一样的，核心思想玩的就是组件...
rematch：当你受不了redux繁琐写法的时候，是时候了解一波rematch了
前言： 前段时间学习完react后，刚好就接到公司一个react项目...
react初探（一）之JSX、状态（state）管理、条件渲染、事件处理
前言： 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 学习11高阶组件
react 中的高阶组件主要是对于 hooks 之前的类组件来说的，如...
react 学习(四) 批量更新及合成事件
我们上一节了解了组件的更新机制，但是只是停留在表层上，例...
react 学习(二) 实现类和函数式组件
我们上一节了解了 react 的虚拟 dom 的格式，如何把虚拟 dom...