redux的中间件相当于改写store的dispatch方法。
redux-applyMiddleware源代码
export default function applyMiddleware(...middlewares) {
return createStore => (...args) => {
const store = createStore(...args)
let dispatch = () => {
throw new Error(
`Dispatching while constructing your middleware is not allowed. ` +
`Other middleware would not be applied to this dispatch.`
)
}
let chain = []
const middlewareAPI = {
getState: store.getState,
dispatch: (...args) => dispatch(...args)
}
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}
通过以下两行源码
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
可推导出redux给middleware函数暴露了通用的api，所有的middleware必须写成
export default ({getState, dispatch} => next => {
...
})
其中next函数就是store的dispatch的引用，中间件内部可以使用。此后dispatch方法会被改写，中间件内部的dispatch也是改写后的dispatch。
redux-thunk源码
function createThunkMiddleware(extraArgument) {
return ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
return next(action);
};
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;
redux-thunk就是通过改写dispatch方法实现兼容异步更改state的。注意next才是redux本身的dispatch方法的引用，中间件中的dispatch是compose(...chain)(store.dispatch)的返回值，已经被改写了。
