Redux DevTools能否跨页面重载保持State标签展开以追踪状态变化?
Redux DevTools 跨页面重载保留视图的实现方案
你需要的持久化视图状态能力,Redux DevTools 本身已内置支持,无需额外编写自定义脚本,可按照以下步骤完成配置:
- 开启扩展内置的持久化核心开关
打开Redux DevTools面板,点击右上角的齿轮形状设置图标,找到以下两个开关并启用:Persist selected tab:自动记录用户选中的标签页,页面重载后直接还原你上次选定的State标签,不会自动跳转到Diff标签页Persist expanded state tree nodes:自动记录所有手动展开的状态树节点路径,页面重载后按照之前的展开层级完整还原状态树结构
两个开关开启后,之前需要重复执行的切标签、逐层展开状态树的操作都会被自动复用,无需每次手动重置。
- 配置目标变量的固定定位能力
定位到你关注的x变量所在的树节点后,右键点击该节点,选择Pin this path选项。开启后,DevTools会在每次状态树加载完成时,自动把x变量对应的节点滚动到可视区域,不需要手动逐层查找目标节点。 - 内嵌版DevTools的适配配置
如果使用的是集成在项目代码中的内嵌版redux-devtools组件(而非浏览器扩展形式),可在组件初始化配置中加入shouldPersist: true参数,视图状态会自动存储到浏览器的sessionStorage中,实现和浏览器扩展一致的跨重载持久化效果。
注意:如果配置后重载仍未生效,优先检查Redux DevTools扩展版本,3.0以下的早期版本存在状态持久化的兼容Bug,升级到最新正式版即可解决。
内容的提问来源于stack exchange,提问作者adamgy
相关产品推荐
相关产品推荐

