有没有一种方法可以在Redux DevTools的"状态"选项卡中查看页面重新加载时的状态更改

Question

我正在使用Redux DevTools来跟踪应用程序中的状态更改。

我知道一旦我的应用程序加载，我就可以跟踪应用程序状态的变化：

1. 打开State选项卡
2. 展开状态树以查找我感兴趣的x变量
3. 每当我在应用程序中做某事时，我都可以立即看到x的值发生了变化

这一切都很好。然而，如果我重新加载页面，Redux DevTools会切换回Diff选项卡，所以我必须：

1. 返回State选项卡
2. 再次展开状态树并查找x变量
3. 检查x的值

有没有办法保持State选项卡打开并展开树，以便我可以查看页面重新加载之间的状态更改？

Answer 1

目前没有办法。

不过，这也有一个问题：https://github.com/zalmoxisus/redux-devtools-extension/issues/303

如果这真的对你有用，你可以自己派生扩展并添加这个功能。

初始状态设置如下：https://github.com/reduxjs/redux-devtools/blob/a094e3b42cdeab75eb5fdbe56e6b7ad784c01ab3/packages/redux-devtools-inspector-monitor/src/redux.ts

检查下面的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;
}