Есть ли способ просмотреть изменения состояния при перезагрузке страницы на вкладке «Состояние» в Redux DevTools?

Я использую Redux DevTools для отслеживания изменений состояния в моем приложении.

Я знаю, что могу отслеживать изменения в состоянии моего приложения после его загрузки:

  1. Откройте вкладку State
  2. Разверните дерево состояний, чтобы найти x переменную, которая меня интересует
  3. Всякий раз, когда я что-то делаю в приложении, я сразу вижу значение x change

Все в порядке. Однако, если я перезагружу страницу, Redux DevTools вернется на вкладку Diff, поэтому мне придется:

  1. Вернитесь на вкладку State
  2. Снова разверните дерево состояний и найдите x переменную
  3. Проверить значение x

Есть ли способ оставить вкладку State открытой и развернуть дерево, чтобы я мог просматривать изменения состояния между перезагрузками страницы?


person adamgy    schedule 16.04.2021    source источник
comment
На вкладке «Монитор журнала» ведется журнал состояний и действий и остается открытым при обновлении страницы. Не так полезна, как вкладка «Инспектор -› Состояние », но она показывает все события при загрузке.   -  person 0stone0    schedule 19.04.2021
comment
Только что проверил, но вкладка Log monitor также не остается открытой для меня. Я использую redux-devtools-extension   -  person adamgy    schedule 19.04.2021


Ответы (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.network

проверьте 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;
}
person Tiago Coelho    schedule 20.04.2021
comment
Ой, это облом. В любом случае спасибо, по крайней мере, я знаю, что я не одинок со своим желанием этой функции ... - person adamgy; 23.04.2021