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文章链接描述,链接描述
先说结论:
thunk
后面的中间件不走了,自然 logger 也无法记录。next
是包装过后的 dispatch,也就是用来一层层调用 middleware 的,这个看官网的教程应该很好理解。thunk
中间件的核心是下面这段。thunk
后面中间件不走,是因为它没有将你的方法通过next
传递给下一个中间件,而是直接调用了你方法,并将dispatch
传给了你的方法的第一个参数,这样使得你可以在你的函数中再使用 dispatch 来 dispatch 一个 action。新 dispatch 的 action 自然会重新走整个 middleware 的流程。所以,如果你将 logger 置于 thunk 之后,且函数不再 dispatch 一个 action 的话,logger 中间件是不会有记录的。
需要注意的是,logger 中间件是否执行取决于你
applyMiddleware
的次序,如果,你将例子中applyMiddleware
的顺序倒一倒,logger 中间件还是会走的。