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

发布时间：2026/9/25 4:11:14

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），仅供参考

相关新闻

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

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

区块链Web3 【免费下载链接】ethers.js Complete Ethereum library and wallet implementation in JavaScript. 项目地址： https://gitcode.com/gh_mirrors/et/ethers.js 点击查看 免费下载 本篇指南围绕 ethers.js 仓库中 misc/basedirs/lib.esm/README.md 展开&a…

2026/9/25 4:11:14 阅读更多 →
6+1+3混合模型与四层智能体架构：AI平台重构工程实践

6+1+3混合模型与四层智能体架构：AI平台重构工程实践

去年Q4，我们做了一次AI模型平台的彻底重构。说它不算成功，是因为前后推翻重来了三版，才最终跑通一个能同时服务内部十几个团队的生产级体系。沉淀下来的东西，内部代号55873生态，核心是三件事：613混合模型矩…

2026/9/25 4:10:14 阅读更多 →
数据安全技术演进与Kerberos落地：从分类分级到零信任的治理路径

数据安全技术演进与Kerberos落地：从分类分级到零信任的治理路径

以“摸清家底”为起点的数据安全：行业技术演进与生态博弈数据安全这行这两年给一线做项目的人最直观的感受，就是“活变多了，问题变复杂了”。前几年提到数据安全，大多数人脑子里还是一堆单点产品：数据库审计、脱敏、加…

2026/9/25 4:10:14 阅读更多 →

最新新闻

如何用MindSpeed LLM YaRN扩展上下文：长文本训练技巧详解

如何用MindSpeed LLM YaRN扩展上下文：长文本训练技巧详解

如何用MindSpeed LLM YaRN扩展上下文：长文本训练技巧详解 【免费下载链接】MindSpeed-LLM 昇腾LLM分布式训练框架 项目地址: https://gitcode.com/Ascend/MindSpeed-LLM MindSpeed-LLM 是昇腾 LLM 分布式训练框架，内置 YaRN 上下文扩展能力&#…

2026/9/25 5:45:34 阅读更多 →
让失效的 Flash 网页重新播放：Ruffle 浏览器扩展实战指南

让失效的 Flash 网页重新播放：Ruffle 浏览器扩展实战指南

让失效的 Flash 网页重新播放：Ruffle 浏览器扩展实战指南 【免费下载链接】ruffle A Flash Player emulator written in Rust 项目地址: https://gitcode.com/GitHub_Trending/ru/ruffle 打开一个老网页，原本放游戏或视频的地方只剩一块灰底和&qu…

2026/9/25 5:45:34 阅读更多 →
如何给MHY_Scanner添加新游戏支持？扫码登录器平台接入实战教程

如何给MHY_Scanner添加新游戏支持？扫码登录器平台接入实战教程

如何给MHY_Scanner添加新游戏支持？扫码登录器平台接入实战教程 【免费下载链接】MHY_Scanner MHY扫码登录器，支持从直播流抢码。 项目地址: https://gitcode.com/gh_mirrors/mh/MHY_Scanner MHY_Scanner 是一个免费的米哈游扫码登录器&#xff0c…

2026/9/25 5:45:34 阅读更多 →
自建CRM系统实战：从Excel迁移到Docker部署的完整指南

自建CRM系统实战：从Excel迁移到Docker部署的完整指南

DeskcommCRM 是我们自己搭的一套客户管理系统，从决定自建到正式上线用了差不多三周时间。写这篇东西的原因很简单：我在配置系统、拉团队使用、处理数据迁移的过程中，看到太多人在“免费CRM”和“自建系统”之间来回纠结，也收到过不…

2026/9/25 5:45:34 阅读更多 →
Skill Recorder到底采集什么数据：按下Record前必须读透的隐私边界完整清单

Skill Recorder到底采集什么数据：按下Record前必须读透的隐私边界完整清单

Skill Recorder到底采集什么数据：按下Record前必须读透的隐私边界完整清单 【免费下载链接】skill-recorder Desktop app that records your on-screen work session and uses the GitHub Copilot CLI to reconstruct it as an intent ordered steps, then builds …

2026/9/25 5:45:34 阅读更多 →
点云分割总结

点云分割总结

点云分割总结point transformerbackground 标量自注意力和向量自注意力（可参考论文）标量自注意力向量注意力Point Transformer Layer下采样上采样整体结构point transformer v2group vector attentionPosition Encoding MultiplerPartition-based Poolin…

2026/9/25 5:44:34 阅读更多 →

日新闻

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

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

最近半年我一直在琢磨一件事：AI元人文到底是什么？说白了，就是“用元视角重新审视人与AI的关系”，也在“探索AI如何反向逼着我们发现自己的思考边界”。标题里的“元探索”，在我看就是一层套一层的追问——当你用AI解决…

2026/9/25 0:00:41 阅读更多 →
Python+CNN车牌识别实战：从数据预处理到模型训练与部署

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

简介：基于Python与卷积神经网络的车牌识别项目，面向计算机视觉初学者及智能交通开发者，目标是帮助用户掌握从数据预处理、模型构建到实际部署的完整流程。压缩包共25个文件，包含jpg/png图像样本、py训练脚本、md说明文档、dat数据…

2026/9/25 0:00:41 阅读更多 →
Vim基础操作全攻略：保存退出、模式切换与高频命令实战

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

1. 项目概述1.1 核心需求解析今天聊聊Vim。写这个题目的原因是：几乎每个后端开发者、运维人员、数据工程师某天都会遇到一个场景——深夜加班，服务器登录界面只有黑底白字，编辑器只有vi/vim，你必须在五分钟内完成一次配置修改并保…

2026/9/25 0:00:41 阅读更多 →

周新闻

Flutter for OpenHarmony游戏卡片渐变背景实战：从原理到性能优化

Flutter for OpenHarmony游戏卡片渐变背景实战：从原理到性能优化

直接铺开项目本身吧。这几个月我一直在折腾一件事：用Flutter给OpenHarmony做一款游戏集合类的App，说白了就是把若干小游戏塞进一个壳里，用统一入口分发。这个方向本身不算新鲜，真正让我花了不少心思的，是首页那堆游戏卡…

2026/9/24 14:34:13 阅读更多 →
Word表格编号全攻略：从列表编号到题注交叉引用

Word表格编号全攻略：从列表编号到题注交叉引用

写Word文档，最让人头疼的往往是那些“看起来不起眼”的小问题。比如表格编号这事：今天在表后面多加了两个空白行，明天给客户交稿前发现整个章节的编号全部错位，光是挨个改序号就能耗掉大半个下午。我前阵子帮人整理一份上百页的技…

2026/9/24 9:10:42 阅读更多 →
从第一个站到第二个站：独立开发者的静态网站选型与落地实践

从第一个站到第二个站：独立开发者的静态网站选型与落地实践

1. 项目概述1.1 核心需求解析做独立开发者这几年，说实话，第一个网站上线的那天晚上我兴奋得没睡着。但等它跑了半年，流量惨淡、功能臃肿、代码自己都懒得看第二遍之后，我才慢慢琢磨明白一个道理：第一个网站是练手&…

2026/9/24 14:33:56 阅读更多 →

月新闻

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能分类：[AI/大模型]细分主题：AI 增强型 CI/CD 流水线自动化与 GitOps 实践：Agent 工作流、工具调用与任务拆解：从原型到生产的验收清单很多团队在尝试用大…

2026/9/24 12:50:34 阅读更多 →
容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场分类：[工程技术]细分主题：Kubernetes 生产环境运维与排障实战：可复制的项目复盘模板与决策记录大部分团队的事故复盘报告，最后都变成了躺在 Confluence 或钉…

2026/9/24 14:33:48 阅读更多 →
容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步分类：[工程技术]细分主题：Docker 容器化技术与镜像安全管理：核心链路的逐步实现与关键代码取舍面对一个积累了五六年历史包袱的单体架构应用（包含 Web 接口、后台…

2026/9/24 12:49:17 阅读更多 →