3

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

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

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

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

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

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

4

1 回答 1

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;
}
于 2021-04-20T12:25:33.790 回答