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

Question

I'm using Redux DevTools to track the state changes in my application.

I know that I can track changes in my application's state once my application is loaded:

1. Open the State tab
2. Expand the state tree to find x variable I'm interested in
3. Whenever I do something in the application, I can immediately see the value of x change

This is all fine. However, if I reload the page, Redux DevTools switches back to the Diff tab, so I have to:

1. Go back to the State tab
2. Expand the state tree again and find x variable
3. Check the value of x

Is there a way to keep the State tab open and the tree expanded so that I can view state changes between page reloads?

Answer 1

There is no way currently.

There is an issue for this though: https://github.com/zalmoxisus/redux-devtools-extension/issues/303

If this is really useful for you you could fork the extension and add that feature yourself.

The initial state is set here: https://github.com/reduxjs/redux-devtools/blob/a094e3b42cdeab75eb5fdbe56e6b7ad784c01ab3/packages/redux-devtools-inspector-monitor/src/redux.ts

check the tabName: 'Diff' below:

export const DEFAULT_STATE: DevtoolsInspectorState = {
  selectedActionId: null,
  startActionId: null,
  inspectedActionPath: [],
  inspectedStatePath: [],
  tabName: 'Diff',
};

you could store the state in localStorage on every change(you would do that in the reducer function in this file) and have it loaded here by doing something along the lines of:

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

on the reducer you could do something like:

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