Rematch Redux Devtools 实战：零配置接入、devtoolOptions 调参与 Remote 远程调试-北京尧图网络

前端【免费下载链接】rematchThe Redux Framework项目地址https://gitcode.com/gh_mirrors/re/rematch点击查看免费下载Rematch 作为 Redux 框架对 Redux Devtools 的支持是其调试体验的核心一环。本篇指南围绕仓库文档 docs/recipes/redux-devtools.md 展开先讲清开箱即用的接入原理从源码看是 Rematch 在创建 store 时自动探测并注入浏览器扩展的 compose 方法再完整覆盖devtoolOptions的全部可用配置项最后给出 Remote Redux-DevtoolsSocketCluster远程调试与 React Native 生态react-native-debugger、Reactotron的完整实操方案。读完你应当能够在生产环境安全关闭 Devtools、用actionSanitizer等选项裁剪监控内容并搭建一套可用的远程 Devtools 工作流。零配置init() 即完成 Devtools 接入Rematch 与 Redux Devtools 浏览器扩展Redux Devtools Extension零配置集成。只要浏览器安装了对应扩展调用init()后 Devtools 面板立即生效import { init } from rematch/core init() // devtools up and running其零配置并非魔法。从 reduxStore.ts 中创建 store 的逻辑看Rematch 组装 enhancers 时会先判断用户是否提供了devtoolComposer否则回退到内置的composeEnhancersWithDevtools见 reduxStore.ts#L28-L33const enhancers bag.reduxConfig.devtoolComposer ? bag.reduxConfig.devtoolComposer(...bag.reduxConfig.enhancers, middlewares) : composeEnhancersWithDevtools(bag.reduxConfig.devtoolOptions)( ...bag.reduxConfig.enhancers, middlewares )而composeEnhancersWithDevtools的判定逻辑非常保守见 reduxStore.ts#L167-L175function composeEnhancersWithDevtools( devtoolOptions: DevtoolOptions {} ): (...args: any[]) Redux.StoreEnhancer { return !devtoolOptions.disabled typeof window object window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__(devtoolOptions) : Redux.compose }也就是说同时满足三个条件才真正接入扩展devtoolOptions.disabled不为true运行环境存在window对象typeof window object——这保证了 Node.js / 测试环境下自动降级不会因缺少扩展而报错浏览器中确实注入了window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__扩展未安装时该全局变量不存在同样静默降级为Redux.compose。此外config.ts#L31-L34 中为devtoolOptions提供了默认值name字段默认取 store 名称即init({ name })传入的名称未传时为自动生成的Rematch Store N。这意味着 Devtools 面板中显示的 store 实例名与 Rematch 的name配置天然一致多 store 场景下不会混淆。devtoolOptions完整的 Redux Devtools 配置入口Rematch 通过redux.devtoolOptions透传 Redux Devtools Extension 的 compose 配置参数例如文档给出的actionSanitizer示例import { init } from rematch/core init({ redux: { devtoolOptions: { actionSanitizer: (action) action, }, }, })DevtoolOptions的类型定义与完整 JSDoc 位于 types.ts#L601-L770其中声明了全部受支持的字段。结合类型注释整理如下配置项类型 / 默认值说明disabledboolean置true时彻底关闭 Devtools注释明确其为 useful for production usagesnamestring监控面板中显示的实例名默认document.titleRematch 侧默认取 storenameactionCreators数组或对象在 Dispatcher 中可用的 action creatorlatencynumber默认 500ms批量发送 action 的时间间隔设为0则即时发送性能受压时可调大maxAgenumber默认 50历史树中允许保留的最大 action 数超出后丢弃最旧记录critical for performanceserializeboolean或细粒度对象控制 Date、Regex、undefined、Error、Symbol、Map、Set、function 等特殊值的序列化底层使用 jsanactionSanitizer/stateSanitizer函数分别在 action 发送前、state 记录前做变换可用于脱敏actionsBlacklist/actionsWhitelist字符串或正则数组按 action type 过滤指定actionsWhitelist时黑名单被忽略predicate(state, action) boolean比黑白名单更精细的发送前过滤钩子shouldRecordChangesboolean默认true设为false时点击 Start recording 前不记录pauseActionType字符串默认PAUSED暂停录制时注入的 action typeautoPauseboolean默认false扩展窗口未打开时自动暂停录制shouldStartLocked/shouldHotReload/shouldCatchErrorsboolean初始锁定、热重载时重算 state、reducer 异常时中断并展示错误features对象精细限制扩展功能pause/lock/persist/export/import/jump/skip/reorder/dispatch/testtrace/traceLimitboolean \| fn默认 10 条记录 action 派发时的调用栈类型定义末尾还有[key: string]: any索引签名types.ts#L770意味着扩展 API 中新增的选项无需等待 Rematch 类型更新即可直接透传。需要注意一个类型细节DevtoolOptions中的actionSanitizer、predicate等回调参数类型基于 Rematch 的Action接口types.ts#L653因此对action.payload/action.meta的访问在类型上是受支持的。仓库测试 config.test.ts#L109-L119 验证了该配置的可用性——传入devtoolOptions: { maxAge: 60000 }后 store 仍可正常初始化并持有initialStatetest(should run with devtool options, () { const store init({ redux: { initialState: { a: 1 }, devtoolOptions: { maxAge: 60000, }, }, }) expect(store.getState()).toEqual({ a: 1 }) })禁用 Devtools生产环境或确实不需要监控的环境中将disabled置为true即可import { init } from rematch/core init({ redux: { devtoolOptions: { disabled: true, }, }, })从源码看disabled是composeEnhancersWithDevtools的第一个短路条件命中后直接使用Redux.compose不会触碰扩展的任何全局变量开销为零。Remote Redux-Devtools跨设备远程监控文档明确说明Remote-redux-devtools 自 Rematch 2.2.0 起受支持。接入方式是把remote-redux-devtools的composeWithDevTools作为redux.devtoolComposer传入——这正是上文源码中enhancers组装逻辑的优先分支用户提供的devtoolComposer会接管所有 enhancer 的 compositionreduxStore.ts#L28-L29Rematch 不再自行插入浏览器扩展的 compose。import { init } from rematch/core import { composeWithDevTools } from remote-redux-devtools init({ redux: { devtoolComposer: composeWithDevTools({ realtime: true, port: 8000, }), }, })搭建 SocketCluster 服务端remote-redux-devtools需要配合 SocketCluster 中转服务使用。安装 CLInpm install --save-dev redux-devtools/cli在package.json中添加启动脚本{ scripts: { start-socket: redux-devtools --openelectron --hostnamelocalhost --port8000 } }--openelectron会用 Electron 打开远程 Devtools 面板--hostname与--port分别指定监听地址与端口。对齐前后端配置运行应用的同时执行npm run start-socket或yarn run start-socket并把remote-redux-devtools的 composer 配置与 SocketCluster 保持一致hostname和port必须与脚本参数对应import { init } from rematch/core import { composeWithDevTools } from remote-redux-devtools init({ redux: { devtoolComposer: composeWithDevTools({ realtime: true, hostname: localhost, port: 8000, }), }, })此时在远程 Devtools 面板中即可看到 Rematch store 的 action 流与 state 时间线效果如下远程方案的价值在于手机等无法安装浏览器扩展的设备如移动 WebView也可以接入完整的时间旅行调试能力这是本地浏览器扩展无法覆盖的场景。React Native 生态react-native-debugger 与 Reactotronreact-native-debuggerreact-native-debugger 与 Rematch 零配置兼容——由于 Rematch 创建的 store 本身就是标准 Redux store且 devtools 注入逻辑对无扩展环境安全降级在 React Native 调试器中打开 Redux 标签页即可直接查看状态。Reactotron如需在 Rematch 中接入 Reactotron需要做两步配置。首先建立 Reactotron 配置// Reactotron.config.js import Reactotron from reactotron-react-native import { reactotronRedux } from reactotron-redux export default Reactotron.configure({ name: MyAwesomeApp, }) .use(reactotronRedux()) // add other devtools here .connect()然后在 store 中通过redux.enhancers覆盖默认的 store 组装把 Reactotron 的 enhancer 注入。这一点与源码对应bag.reduxConfig.enhancers会被展开传入devtoolComposer或composeEnhancersWithDevtoolsreduxStore.ts#L28-L33因此enhancers是与 Devtools 正交、可叠加的通道——即便同时启用浏览器 Devtools 扩展Reactotron 依然能收到全部 action// store.ts import { init } from rematch/core import Reactotron from ./Reactotron.config.js init({ redux: { enhancers: [Reactotron.createEnhancer()], // If using typescript/flow, enhancers: [Reactotron.createEnhancer!()] }, })小结三条配置通道各自的适用场景从 reduxStore.ts 的 enhancer 组装链路看Rematch 把调试相关配置拆成了三条互不干扰的通道选择依据很清晰什么都不传本地 Web 开发浏览器扩展已安装init()后自动接入name默认与 store 名一致redux.devtoolOptions需要调参maxAge、serialize、actionSanitizer脱敏或生产环境关闭disabled: true时使用redux.devtoolComposer需要接管整个 compositionRemote Redux-Devtools 远程调试时使用此时浏览器扩展的 compose 不再介入redux.enhancers与上述三者正交用于叠加 Reactotron 等任意 Redux store enhancer可任意组合。所有配置均通过init()的redux字段传入类型定义参见 types.ts 中的InitConfigReduxdevtoolOptions/devtoolComposer/enhancers字段见 types.ts#L271-L288。赞分享前端【免费下载链接】rematchThe Redux Framework项目地址https://gitcode.com/gh_mirrors/re/rematch点击查看免费下载相关推荐Redux DevTools Remote 远程调试指南从 enhancer 接入到 SocketCluster 消息协议Redux DevTools Remote 远程调试指南从 enhancer 接入到 SocketCluster 消息协议本文是围绕 redux devt开发工具前端QtScrcpy终极指南5分钟掌握安卓设备远程控制的完整教程QtScrcpy终极指南5分钟掌握安卓设备远程控制的完整教程你是否厌倦了在手机小屏幕上操作想要在电脑大屏幕上流畅控制安卓设备QtScrcpy正是你需要的桌面应用音视频ONNX Runtime Web把40MB的AI模型跑进浏览器不上传一行数据ONNX Runtime Web把40MB的AI模型跑进浏览器不上传一行数据把模型放进网页最常见的顾虑有两个用户的数据要不要先发回服务器一个几十MB人工智能推理引擎本地部署深度学习机器学习上一篇Intel优化手册代码示例浮点运算优化的7个关键技巧下一篇Doris 压缩算法选型指南ZSTD、LZ4、Snappy 到底该给表配哪个创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Rematch Redux Devtools 实战：零配置接入、devtoolOptions 调参与 Remote 远程调试

相关推荐

ethers.js 的 ESM 构建产物（lib.esm）：目录职责、生成机制与 import 使用指南

如何为 easy-loading-cj 添加第 28 种动画？从零实现新指示器的完整步骤

UC网盘直链解析原理：不登录下载的底层逻辑与实操

更多资讯

小喵V2电机驱动快速入门：简单积木实现4路电机调速与正反转控制

PHP活码系统源码：动态二维码路由与私域流量管理底座

CCS烧录程序深度解析：从DSP28335到C2000全链路实战指南

Windows安全中心页面不可用：SecHealthUI策略屏蔽深度解析

Turf Voronoi 多边形生成指南：用 @turf/voronoi 将点集转化为泰森多边形

华为昇腾Atlas 300V 24G推理卡部署YOLOv5/v8完全指南

今日更新

AI元人文：从工具使用到思维重构的深度探索

Python+CNN车牌识别实战：从数据预处理到模型训练与部署

Vim基础操作全攻略：保存退出、模式切换与高频命令实战

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？