redux中间件小结，结合redux-thunk和redux-saga

Posted 2021-04-10 雨天请休闲

    小编最近用业余时间一直在研究中间件，最后研究了七七八八，和大家分享下！今天主要讲思想，其他的代码啥的，大家可以自己去看！

    中间件顾名思义就是做中间处理的控件，也就是js。首先我们看redux，因为redux源码设计的时候预留了中间件的那部分，所以我们能轻松按照预留的中间件部分来看出大致组合。

      主要代码是applyMiddleware.js中的dispatch = compose(...chain)(store.dispatch)这一句是把中间件彻底和redux彻底绑定在一起，我们来看看具体中间件。

      首先看redux-thunk，看下图：

        

  

    上面的dispatch其实是action =>{...},之后通过其他方法把store自带的dispatch覆盖，所以我们平时使用的store.dispatch(action)其实就是action =>{...},而这里的next其实是store自带的dispatch，大家看到这里是不是有一种偷梁换柱的感觉，虽然最终还是通过store自带的dispatch实现的，但是调用的确是中间件的方法，虽然都叫做dispatch。

    看了以上内容，大家是不是已经明白中间件如何实现了，没错，其实你不需要管这么多，只要按照redux的规则写就好啦！

     接下来我们来看个高难度的redux-saga，这个中间件其实是参照全局思想，接受action1作为监听，同时处理异步操作，也就是所谓的副作用，同时调用action2，触发store本身的dispatch，完成redux中store的更新！下面是redux-saga的核心代码，在middleware.js，看下图：

    

    大家看到这个方法了吧，sagaMiddleware这个方法也是({ dispatch, getState }) => next => action => {...}这个形式，参数完全一样，不同的只是加了点saga自己处理数据的方式，下面那个sagaMiddleware.run大家是不是想起了注册完redux-saga这个中间件后，每次需要run一下，来开始监听一些特定的action，没错，saga就是通过run中的boundRunSaga这个方法，来实现监听不同的action的，之后就是我们熟悉的每次监听到特定的action，做一些副作用处理，然后再调用redux中的dispatch来触发新的action，来更新store！