在使用redux的时候我们通常要给redux增加中间件,中间件的作用是用户在调用dispatch之后,其之前配置的中间件会按照配置的顺序逐一执行,对流程进行处理。
而applyMiddleware函数就是配置redux中间件的那个函数,首先看一下applyMiddleware的简化代码:
代码语言:javascript复制export default function applyMiddleware(...middlewares) {
return createStore => (...args) => {
// 利用传入的createStore和reducer和创建一个store
const store = createStore(...args)
let dispatch = () => {
throw new Error(
)
}
const middlewareAPI = {
getState: store.getState,
dispatch: (...args) => dispatch(...args)
}
// 让每个 middleware 带着 middlewareAPI 这个参数分别执行一遍
const chain = middlewares.map(middleware => middleware(middlewareAPI))
// 接着 compose 将 chain 中的所有匿名函数,组装成一个新的函数,即新的 dispatch
dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}
阅读源码发现程序作了如下几点:
1、applyMiddleware本质是返回一个函数B,函数的参数为createStore。
2、函数B的内部首先生成了store
3、遍历中间件传入store
4、利用compose将所有传入了store的中间件进行合并串联,并传入最终的dispatch。
更新dispatch并返回。