Redux 续集 | 如何搞定其中的异步操作？

做 React 开发的小伙伴，Redux 操作肯定特别熟练。

那么问题来了，如果此时的 action 是个异步方法，你该怎么办？

答案是中间件解决方案。

很开心的是，Redux 本身也考虑了这一点，它给我们提供了 applyMiddleware 这个中间件接口。

而对于中间件的理解，它就是一个代码管道。代码在执行的过程会经过这个管道，那这样的话，在管道里我们就可以做很多很多自己想做的事。

统一标准

Redux 作者也很聪明，不可能让开发者随意去写入代码，因此他给了统一写法，不按照该写法是要报错哦。

• 该中间件是一个高阶函数，它的返回值必须是一个函数

• 中间件函数以 store 中的 dispatch 和 getState 作为函数参数

一个简易的中间件代码如下：

let logger = function({getState,dispatch}){ //中间件函数
  return function(next){
    return function(action){
      console.log('will dispatch', action)
      let asd = next(action)
    }
  }
}

简化后的代码：

let logger = ({getState,dispatch}) => (next) => (action) =>{
  console.log('will dispatch', action)
  next(action)
}

那对于异步的代码我们放在这个函数内执行就行。

如何使用 applyMiddleware

对于 applyMiddleware 的使用就更简单了，使用方法如下：

let store = createStore(reducers,applyMiddleware(logger))

就是把 applyMiddleware 当作 createStore 的第二个参数。

这里提示一下，applyMiddleware 的参数可以传入很多中间件函数，他们的执行顺序是从左往右，逐个函数执行。

代码虽少，却是 Redux 中的一道坎，希望可以帮助正在头疼 Redux 异步如何处理的小伙伴们(ง •_•)ง。