applyMiddleware 沉思录
作者:互联网
let newStore = applyMiddleware(mid1, mid2, mid3, ...)(createStore)(reducer, null);
给({ getState, dispatch }) => next => action签名的函数组分步赋值并进行串联的过程;
整体上是dispatch的method swizzling;
export default function applyMiddleware(...middlewares) {
return (next) =>
(reducer, initialState) => {
var store = next(reducer, initialState);
var dispatch = store.dispatch;
var chain = [];
//({ getState, dispatch })
var middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
};
//({ getState, dispatch })
chain = middlewares.map(middleware => middleware(middlewareAPI));
//next
dispatch = compose(...chain, store.dispatch);
return {
...store,
dispatch
};
};
}
export default store => next => action => {
console.log('dispatch:', action);
next(action);
console.log('finish:', action);
}
export default ({ getState, dispatch }) => next => action => {
console.log('dispatch:', action);
next(action);
console.log('finish:', action);
}
function compose(...funs) {
return arg => funcs.reduceRight( (compose, f) => f(composed), arg)
}
https://www.cnblogs.com/fe-linjin/p/10494763.html
https://stackoverflow.com/questions/41139585/what-is-the-next-in-applymiddleware
...middlewares (arguments): 遵循 Redux middleware API 的函数。每个 middleware 接受 Store 的 dispatch 和 getState 函数作为命名参数,并返回一个函数。该函数会被传入 被称为 next 的下一个 middleware 的 dispatch 方法,并返回一个接收 action 的新函数,这个函数可以直接调用 next(action),或者在其他需要的时刻调用,甚至根本不去调用它。调用链中最后一个 middleware 会接受真实的 store 的 dispatch 方法作为 next 参数,并借此结束调用链。所以,middleware 的函数签名是 ({ getState, dispatch }) => next => action。
https://www.redux.org.cn/docs/api/applyMiddleware.html
标签:getState,沉思,middleware,applyMiddleware,dispatch,next,action,store 来源: https://www.cnblogs.com/feng9exe/p/11175413.html