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

Question

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

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

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

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

返回 State 选项卡
再次展开状态树，找到x变量
检查 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;
}

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

Is there a way to view state changes across page reloads in the State tab in Redux DevTools?

reactjs

redux

redux-devtools

redux-devtools-extension