reactjs - 有没有办法在 Redux DevTools 的 State 选项卡中查看页面重新加载时的状态变化?
问题描述
我正在使用 Redux DevTools 来跟踪我的应用程序中的状态更改。
我知道一旦我的应用程序被加载,我就可以跟踪我的应用程序状态的变化:
- 打开
State
选项卡 - 展开状态树以查找
x
我感兴趣的变量 - 每当我在应用程序中做某事时,我都能立即看到
x
改变的价值
这一切都很好。但是,如果我重新加载页面,Redux DevTools 会切换回Diff
选项卡,所以我必须:
- 返回
State
选项卡 - 再次展开状态树,找到
x
变量 - 检查值
x
有没有办法让State
选项卡保持打开状态并展开树,以便我可以查看页面重新加载之间的状态变化?
解决方案
目前没有办法。
但是有一个问题:https ://github.com/zalmoxisus/redux-devtools-extension/issues/303
如果这对您真的有用,您可以分叉扩展并自己添加该功能。
检查tabName: 'Diff'
以下:
export const DEFAULT_STATE: DevtoolsInspectorState = {
selectedActionId: null,
startActionId: null,
inspectedActionPath: [],
inspectedStatePath: [],
tabName: 'Diff',
};
您可以在每次更改时将状态存储在 localStorage 中(您可以在此文件的 reducer 函数中执行此操作)并通过执行以下操作将其加载到此处:
const persistedStateItem = localStorage.getItem('default_redux_devtools_state');
const persistedState = persistedStateItem && JSON.parse(persistedStateItem);
export const DEFAULT_STATE: DevtoolsInspectorState = persistedState || {
selectedActionId: null,
startActionId: null,
inspectedActionPath: [],
inspectedStatePath: [],
tabName: 'Diff',
};
在减速器上,您可以执行以下操作:
export function reducer<S, A extends Action<unknown>>(
props: DevtoolsInspectorProps<S, A>,
state = DEFAULT_STATE,
action: DevtoolsInspectorAction
) {
const nextState = {
...reduceUpdateState(state, action),
};
localStorage.setItem('default_redux_devtools_state', JSON.stringify(nextState));
return nextState;
}
推荐阅读
- sublimetext3 - Sublime Text 没有可用的包 - 包控制问题 502
- javascript - 尝试使用 firestore 进行多字段搜索
- html - 为什么移动中的子菜单在菜单顶部打开而不是向下推菜单?
- amazon-web-services - 如何在 CloudWatch Logs 代理将日志事件发送到 AWS 之前过滤和转换 EC2 实例中的日志事件
- amazon-web-services - AWS 无服务器 - 将云端 POST 请求修改为 s3 网站来源的 GET 请求
- python-3.x - PIL 的 ImageDraw 中可用的确切颜色名称是什么?
- python - 如何从 aiohttp.web 服务器返回 HTML 响应?
- html - 如何打印完全适合 A4 纸的 HTML 表格
- javascript - 使用 Nodejs 的 Pug 模板的 Markdown 或所见即所得编辑器
- css - wordpress & divi builder 没有显示完整的 Dubsado 潜在客户表单,而是显示滚动?