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 异步如何处理的小伙伴们(ง •_•)ง。


    推荐阅读:

    老生常谈的 Redux

    技术人年度总结 | 2020,注定不平凡

    2020 最后一篇技术文:可爱的乌咪 UmiJS

    如何设计路由权限?

    是我 Web 端配不上阿里了。

    不可避免的问题:React 的路由如何抽离?

    前端人因为 Vue3 的 Ref-sugar 提案打起来了!


    点点“”和“在看”,保护头发,减少bug。

    浏览 26
    点赞
    评论
    收藏
    分享

    手机扫一扫分享

    分享
    举报
    评论
    图片
    表情
    推荐
    点赞
    评论
    收藏
    分享

    手机扫一扫分享

    分享
    举报