redux中间件applyMiddleware执行有一点不懂,求解答?

1.我传入thunk,promise,logger中间件,当dispatch 传入的action是一个function更新数据,根据thunk的源码,后面的promise,logger中间件都不会执行。那么logger中间件如何记录的action的更新数据?

let newStore = applyMiddleware(thunk, promise,logger)(createStore)(reducer, null);
//applyMiddleware返回的dispatch 应该是
dispatch = thunk(promise(logger(store.dispatch)));
//先看thunk源码
function createThunkMiddleware(extraArgument) {
  return function (_ref) {
    var dispatch = _ref.dispatch;
    var getState = _ref.getState;
    return function (next) {
      return function (action) {
        if (typeof action === 'function') {
          return action(dispatch, getState, extraArgument);
        }
        return next(action);
      };
    };
  };
}
var thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
正常执行流程应该是
thunk -> promise -> logger -> dispatch -> logger -> promise -> thunk 
当我dispatch 传入的action是一个function更新数据,根据thunk的源码,
后面的promise,logger中间件都不会执行。那么logger中间件如何记录的action的更新数据?

2.在thunk,promise里面都采用的return 下一个next,那么dispatch ->后面的logger -> promise -> thunk那不是都不会执行了吗?
我看着是这两篇关于applyMiddleware文章链接描述链接描述

阅读 4.3k
2 个回答

先说结论:

  1. thunk 后面的中间件不走了,自然 logger 也无法记录。

  2. next 是包装过后的 dispatch,也就是用来一层层调用 middleware 的,这个看官网的教程应该很好理解。

thunk 中间件的核心是下面这段。

if (typeof action === 'function') {
    return action(dispatch, getState, extraArgument);
}
return next(action);

thunk 后面中间件不走,是因为它没有将你的方法通过 next 传递给下一个中间件,而是直接调用了你方法,并将 dispatch 传给了你的方法的第一个参数,这样使得你可以在你的函数中再使用 dispatch 来 dispatch 一个 action。新 dispatch 的 action 自然会重新走整个 middleware 的流程。

所以,如果你将 logger 置于 thunk 之后,且函数不再 dispatch 一个 action 的话,logger 中间件是不会有记录的。

需要注意的是,logger 中间件是否执行取决于你 applyMiddleware 的次序,如果,你将例子中 applyMiddleware 的顺序倒一倒,logger 中间件还是会走的。

各位老司机 帮忙求解答

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏