javascript - 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文章链接描述，链接描述

解决方案

先说结论:

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 中间件还是会走的。

这篇关于javascript - redux中间件applyMiddleware执行有一点不懂，求解答？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！