Redux中Middleware原理
下面以redux-trunk为示例了解applyMiddleware用于干什么。
redux-thunk/src/index.js
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;
首先由上面代码可以看出trunk是一个({ dispatch, getState }) =>{}这样的箭头函数。
当 applyMiddleware(trunk)执行后,:
redux/src/applyMiddleware.js
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.`
)
}
const middlewareAPI = {
getState: store.getState,
dispatch: (...args) => dispatch(...args)//此处的args不是上面的args
}
const chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}
从applyMiddleware函数可知返回也是一个函数,trunk作为上一级参数middlewares这个闭包数组中的一个项。
现在我们进入createStore函数中
if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
enhancer = preloadedState
preloadedState = undefined
}
if (typeof enhancer !== 'undefined') {
if (typeof enhancer !== 'function') {
throw new Error('Expected the enhancer to be a function.')
}
//此时enhancer增强函数是applyMiddleware返回的函数
//reducer是函数,preloadedState现在是undefined
return enhancer(createStore)(reducer, preloadedState)
}
传入参数发现const store = createStore(…args)传入reducer新建了一个store,并创建了middlewareAPI中的两个属性,记住dispatch函数中的args不是外面的args,不要混淆。
trunk中传入这个对象返回 next=>{}这个函数,那么chain现在就是这个函数。进入compose函数运算后返回next=>{}函数本身,再次计算后返回action=>{}这个函数,也就是说dispatch函数就是action=>{}这个函数。
总结:
(1)action=>{}函数中的next指的是store.dispatch;
(2)createStore()有中间件后返回的dispatch不是没有传入中间件的dispatch,而是action=>{}函数,store的dispatch是作为next闭包变量传入的;
(3)由createThunkMiddleware函数可知,当action为函数时执行action(dispatch, getState, extraArgument);需注意,此处的dispatch不是store的dispatch,而是applyMiddleware中声明的dispatch,由于dispatch = compose(…chain)(store.dispatch)重新定义了dispatch(引用数据类型,内存指向一样),所以在action中传入的dispatch在执行时执行的是middlewareAPI的dispatch,执行时调用next(createStore中的dispatch方法);
(4)在异步处理的情况下,action无法通过import来获取store的dispatch方法(action中此时store未建立),通过中间件的方式将store中的dispatch方法传递给闭包来保存并实现异步触发。