如何手动用 compose 组合 applyMiddleware 与 DevTools enhancer 创建 Redux store【免费下载链接】reduxA JS library for predictable global state management项目地址: https://gitcode.com/gh_mirrors/re/redux当你不使用 Redux Toolkit 的configureStore而是直接调用原生的createStore时会遇到一个限制createStore(reducer, preloadedState?, enhancer?)的第三个参数只接受一个store enhancer而 Redux 自带的唯一 enhancer 是applyMiddleware()。如果你还想同时接上 Redux DevTools它也是一个 enhancer就必须用compose把多个 enhancer 组合成一个再传给createStore。本文覆盖这条手动组合路径安装依赖、写出compose(applyMiddleware(...), DevTools.instrument())形式的 store 配置并给出仓库 real-world 示例中 dev/prod 分离的完整做法和验证方式。先说清楚适用边界docs/api/compose.md和docs/api/applyMiddleware.md都明确提示你不应该在一般项目里直接调用compose/applyMiddleware——Redux Toolkit 的configureStore会自动配置好标准applyMiddleware和 Redux DevTools enhancer并提供enhancers参数传递额外 enhancer。手动组合这条路主要服务于存量 legacy 代码库的维护或需要完全自定义 store 装配方式的场景。准备安装依赖在 docs/introduction/Installation.md 中安装redux核心包的方式是# NPM npm install redux # Yarn yarn add redux文档同时建议生态中不少包不提供 UMD 构建推荐配合模块打包工具Vite、Webpack 等使用。本文用到的额外包名均出自仓库示例与 API 文档的导入语句npm install redux-thunk # thunk 中间件compose.md 示例使用 npm install redux-logger # real-world 示例中的 createLogger npm install redux-devtools redux-devtools-log-monitor redux-devtools-dock-monitor其中redux-devtools、redux-devtools-log-monitor、redux-devtools-dock-monitor三个包名来自 real-world 示例的 DevTools 容器 的 import 语句仅在你需要文档式 DevTools 界面时才需要安装。核心用 compose 把多个 enhancer 合并成一个先明确三个 API 各自的角色以下事实来自 docs/api/createStore.md、docs/api/applyMiddleware.md 与 docs/api/compose.mdapplyMiddleware(...middleware)本身是一个 store enhancer其签名是createStore createStore最简单的用法是把它作为最后一个enhancer参数传给createStore()原生createStore默认不认识 middleware必须通过applyMiddleware给它加上这个能力compose(...functions)是一个函数式工具从右向左组合函数最右侧函数提供组合后函数的参数签名。源码注释src/compose.ts说明了其语义compose(f, g, h)等价于(...args) f(g(h(...args)))。因此组合多个 enhancer 的标准写法是把applyMiddleware的结果和 DevTools 的 enhancer 一起传给compose。这是compose.md给出的示例import { createStore, applyMiddleware, compose } from redux import { thunk } from redux-thunk import DevTools from ./containers/DevTools import reducer from ../reducers const store createStore( reducer, compose(applyMiddleware(thunk), DevTools.instrument()) )注意compose(applyMiddleware(thunk), DevTools.instrument())的返回结果是一个函数正好填入createStore的单一enhancer参数位置。代码中./containers/DevTools与../reducers是文档示例中的相对路径落到你自己的项目时按实际文件位置调整。组合顺序applyMiddleware 必须排在前面applyMiddleware.md的 Tips 部分有一条明确的顺序要求如果你除了applyMiddleware还使用其他 store enhancer务必让applyMiddleware排在组合链的前面因为 middleware 可能是异步的。文档给出的理由是如果把 DevTools 放在前面DevTools 看不到 Promise 类 middleware 发出的原始 action所以应该写成compose(applyMiddleware(...), DevTools.instrument())这样的顺序而不是反过来。完整做法real-world 示例的 dev/prod 分离配置仓库的 real-world 示例 展示了把这套手动组合用于实际项目时的组织方式核心文件是 configureStore.dev.jsimport { createStore, applyMiddleware, compose } from redux import { thunk } from redux-thunk import { createLogger } from redux-logger import api from ../middleware/api import rootReducer from ../reducers import DevTools from ../containers/DevTools const configureStore preloadedState { const store createStore( rootReducer, preloadedState, compose(applyMiddleware(thunk, api, createLogger()), DevTools.instrument()) ) return store } export default configureStore对照上面的最小示例它多了两处内容preloadedState作为createStore的第二个参数用于预加载状态SSR 水合或恢复会话时用到middleware 列表里除了thunk还传入了api该项目自定义的中间件位于 middleware/api和createLogger()以及redux-logger提供的日志能力。如果你没有自定义中间件可以只保留applyMiddleware(thunk)。对应的 DevTools 容器在 containers/DevTools.js 中定义import React from react import { createDevTools } from redux-devtools import LogMonitor from redux-devtools-log-monitor import DockMonitor from redux-devtools-dock-monitor export default createDevTools( DockMonitor toggleVisibilityKeyctrl-h changePositionKeyctrl-w LogMonitor / /DockMonitor )生产构建则完全去掉 DevTools 和调试日志configureStore.prod.js 直接使用applyMiddleware不需要composeconst configureStore preloadedState createStore(rootReducer, preloadedState, applyMiddleware(thunk, api))两个版本由 store/configureStore.js 按环境切换if (process.env.NODE_ENV production) { module.exports require(./configureStore.prod) } else { module.exports require(./configureStore.dev) }如果想在运行时条件性地加入调试中间件applyMiddleware.md还给出了一种按process.env.NODE_ENV组装中间件数组的写法其中a、b、some-debug-middleware、another-debug-middleware均为文档中的占位示例值需替换为你自己的中间件let middleware [a, b] if (process.env.NODE_ENV ! production) { const c require(some-debug-middleware) const d require(another-debug-middleware) middleware [...middleware, c, d] } const store createStore( reducer, preloadedState, applyMiddleware(...middleware) )文档指出只在需要时 import 调试中间件可以让打包工具裁掉这些模块减小构建体积。验证 store 是否按预期工作文档给出的验证手段有两个1. 用自建 logger 中间件观察 dispatch 链路。applyMiddleware.md的 Custom Logger Middleware 示例展示了 middleware 签名({ getState, dispatch }) next action的最小实现import { createStore, applyMiddleware } from redux import todos from ./reducers function logger({ getState }) { return next action { console.log(will dispatch, action) // Call the next dispatch method in the middleware chain. const returnValue next(action) console.log(state after dispatch, getState()) return returnValue } } const store createStore(todos, [Use Redux], applyMiddleware(logger)) store.dispatch({ type: ADD_TODO, text: Understand the middleware })文档示例输出非固定预期取决于你的 reducer 与状态will dispatch: { type: ADD_TODO, text: Understand the middleware } state after dispatch: [ Use Redux, Understand the middleware ]看到 dispatch 前后的两条日志说明 middleware 链已生效并包裹了dispatch。2. 用store.getState()检查状态。createStore.md的示例演示了最直接的状态核对console.log(store.getState()) // [ Use Redux, Read the docs ]在接了 DevTools 的 dev 配置下DevTools.instrument()会让上述 action 进入 DevTools 界面compose.md对该示例的描述即用applyMiddleware与 redux-devtools 包的若干开发者工具增强 store可在 DockMonitor 的 LogMonitor 中查看 action 记录。限制说明与下一步createStore自 Redux 4.2.0 起被标记为deprecated。这只是视觉上的删除线没有运行时错误或警告createStore会一直保留、不会被移除。如果不想看到删除线可以改用import { legacy_createStore as createStore } from redux的别名导入见 createStore 文档。Redux 官方建议所有应用转向 Redux Toolkit 的configureStore它自动完成本文描述的applyMiddleware DevTools 装配。如果你的目标是改造存量 legacy 代码库可参考 Migrating to Modern Reduxcompose本身的定位也见 docs/api/compose.md。【免费下载链接】reduxA JS library for predictable global state management项目地址: https://gitcode.com/gh_mirrors/re/redux创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考