⚡ 30 秒速记

• 中间件包装 dispatch，归约函数保持纯净
• store => next => action 分开取得能力与输入
• next 去下一层，dispatch 重走整条链
• 拦截、变换和继续都要明确契约
• 保留返回值，避免意外吞错与重复派发

Redux 中间件是在动作到达状态计算前后加一层处理。 每层拿到存储能力和下游派发函数，可以记录日志、执行函数动作或继续传递普通动作。调用 next(action) 才沿当前链往后走，用 dispatch 则通常从链头重新进入。写中间件时要同时关注动作、返回值和异常，漏传会丢更新，重复传则可能把一次操作执行多遍。

版本校准： 本文若分析 ReactDOM.render、旧生命周期或栈调和，应把它视为理解架构演进的历史路径。React 19 已移除 ReactDOM.render，当前客户端入口使用 createRoot；并发渲染也必须区分可中断的渲染阶段与同步提交阶段。迁移前对照 React 19 官方升级指南。

一、前言

• 在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
    }
  }
}