reactjs - 有没有办法在 Redux DevTools 的状态选项卡中查看页面重新加载时的状态变化？

Question

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

我知道我可以在加载应用程序后跟踪应用程序状态的变化:

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

这一切都很好。但是，如果我重新加载页面，Redux DevTools 会切换回 Diff 选项卡，因此我必须:

1. 返回状态标签
2. 再次展开状态树，找到x变量
3. 检查x的值

有没有办法让 State 选项卡保持打开状态并伸展树(Splay Tree)，以便我可以查看页面重新加载之间的状态变化？

Answer 1

目前没有办法。

虽然这有一个问题:https://github.com/zalmoxisus/redux-devtools-extension/issues/303

如果这对您真的有用，您可以 fork 扩展并自己添加该功能。

这里设置初始状态: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',
};

在 reducer 上你可以做这样的事情:

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;
}