前言
"It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer."
这是 Redux 作者 Dan Abramov 对 middleware 的描述。它提供了一个分类处理 action 的机会。在 middleware 中,你可以检阅每一个流过的 action,挑选除特定类型的 action 进行相应操作,给你一个改变 action 的机会。
面对多样的业务场景,单纯地修改 dispatch 或 reducer 的代码显然不具有普适性,需要的是可以组合的,自由插拔的插件机制,Redux 借鉴了 Koa 里 middleware 的思想。Redux 中 reducer 更关系的是数据的转化逻辑,所以middleware就是为了增强 dispatch 而出现。
Redux源码之 applyMiddleware
解读 redux 源码之 applyMiddleware,代码目录在 redux/src/applyMiddleware。
对应 redux 版本:3.7.2。
import compose from './compose'
/**
* 创建一个将中间件应用于调度方法的存储增强器的 Redux store。这对于表达
* 各种任务而言非常方便,比如简洁的异步执行操作,或者记录每次 action
* payload。
*
* 请参阅 `redux-thunk`作为 Redux 中间件的实例。
*
* 因为中间件可能是异步,所以这应该是第一个 store 增强器在组成链。
*
* 请注意,每个中间件都将被赋予`dispatch`和`getState`功能。
*
* @param {...Function} middlewares 要应用的中间件链。
* @param {Function} 应用中间件的 store 增减器。
*/
export default function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState, enhancer) => {
const store = createStore(reducer, preloadedState, enhancer)
let dispatch = store.dispatch
let chain = []
const middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}
网友评论