Redux 续集 | 如何搞定其中的异步操作？
勾勾的前端世界
共 1225字，需浏览 3分钟
·
2021-01-08 08:28
(｡･∀･)ﾉﾞ嗨，我是你稳定更新、持续输出的勾勾。
做 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 异步如何处理的小伙伴们(ง •_•)ง。
推荐阅读：
前端人因为 Vue3 的 Ref-sugar 提案打起来了！
点点“赞”和“在看”，保护头发，减少bug。
评论