⚡ 30 秒速记
- 中间件在派发边界组合处理能力
next继续当前链,dispatch从入口再派发- 函数动作需要专门中间件执行
- 顺序决定看到的动作形态与前后状态
- 继续传递时返回下游结果
中间件是在动作进入状态计算前后插入可组合的处理层。 日志、异步编排和动作校验都可以放在这里,归约函数继续只做状态计算。每层决定拦截还是调用 next 继续,顺序则决定日志看到函数动作还是最终普通动作。编写时不要只关心动作有没有到达,还要保留返回值与异常传播,避免调用方失去等待异步完成的能力。
版本校准: 原理文章中的代码代表特定实现与写作时间。应用到当前项目时,应先确认浏览器、框架或工具的主版本,再区分稳定的规范语义、可变化的内部实现和项目自身约束。
# 一、前言
- 在
redux里,middleware是发送action和action到达reducer之间的第三方扩展,也就是中间层。也可以这样说,middleware是架在action和store之间的一座桥梁 - 在
redux里,action仅仅是携带了数据的普通js对象
Reducer拆分可以使组件获取其最小属性(state),而不需要整个Store。中间件则可以在Action Creator返回最终可供dispatch调用的action之前处理各种事情,如异步API调用、日志记录等,是扩展Redux功能的一种推荐方式
Redux提供了applyMiddleware(...middlewares)来将中间件应用到createStore。applyMiddleware会返回一个函数,该函数接收原来的creatStore作为参数,返回一个应用了middlewares的增强后的creatStore
export default function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState, enhancer) => {
//接收createStore参数
var store = createStore(reducer, preloadedState, enhancer)
var dispatch = store.dispatch
var chain = []
//传递给中间件的参数
var middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
//注册中间件调用链
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
//返回经middlewares增强后的createStore
return {
...store,
dispatch
}
}
}