Redux异步中间件

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

redux-thunk

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

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

同步情况：dispatch(action)
异步情况：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,payload:result,});}).catch(err=>{next({type:ERROR,laoding:false,error:err,});});
}

使用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',null],}
}return getWeather(cityId){return{url:'/api/getWeatherInfo.json',param:{cityId},types:[null,'GET_WEATHER_SUUCCESS',null],}
}function loadInitData(ip){return[getCurrCity(ip),(dispatch,state)=>{dispatch(getWeather(getCityIdWithState(state)));},];
}

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