redux-thunk源码分析

Posted 2021-03-06 yaooo

 

 1 "use strict";
 2 
 3 function createThunkMiddleware(extraArgument) {
 4   return function (_ref) {
 5     var dispatch = _ref.dispatch,
 6         getState = _ref.getState;
 7     return function (next) {
 8       return function (action) {
 9         if (typeof action === "function") {
10           return action(dispatch, getState, extraArgument);
11         }
12         return next();
13       };
14     };
15   };
16 }  // 将箭头函数转换为普通的函数 参考：https://www.jianshu.com/p/a3b9b0958aeb

 

调用createThunkMiddleware

就必须执行并且再传入_ref 。

这在redux中有相应步骤 将 middlewareAPI 传入

 const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)
    }
    const chain = middlewares.map(middleware => middleware(middlewareAPI))

再得到一个方法，需要传入next

这在redux中也有做相应步骤，

dispatch = compose(...chain)(store.dispatch)

再得到一个方法需要传入一个action 

此方法未执行，  只有在dispatch的时候才会执行。

这就是中间件的作用，包装后的dispatch.  可以接受一个函数。