Redux DevTools Deep Dive

Below is a full practical guide for setup and configuration.

1) How Redux DevTools is connected

1. Install the Redux DevTools browser extension (Chrome/Edge/Firefox).
2. Create a store with initStore(...) or configure global store with configureGlobalStore(...).
3. Ensure DevTools are enabled:
   • default auto mode enables outside production (NODE_ENV !== "production");
   • or configure explicitly via config.devtools.
4. Open the Redux DevTools extension and pick the store by name.

Explicit per-instance enabling example:

const store = initStore({
  initialState: { count: 0 },
  devtools: true,
  actions: ({ actionCreator, setState }) => ({
    inc: actionCreator("inc", () =>
      setState((s) => ({ ...s, count: s.count + 1 })),
    ),
  }),
  selectors: { count: (s) => s.count },
});

2) Config split: config.devtools vs options.devtools

config.devtools (first initStore argument)

Controls whether DevTools are connected:

• devtools: true - enable (default name "hummbit").
• devtools: false - disable.
• devtools: { enabled: boolean, name?: string } - explicit config.

options.devtools (second initStore argument)

Controls naming and event visibility in DevTools:

• name?: string
• hideSetState?: boolean
• hideMergeState?: boolean

Full configuration example:

const store = initStore(
  {
    initialState: { count: 0, loading: false },
    devtools: { enabled: true, name: "counter-config-name" },
    actions: ({ actionCreator, setState, mergeState }) => ({
      inc: actionCreator("counter/inc", () =>
        setState((s) => ({ ...s, count: s.count + 1 })),
      ),
      setLoading: actionCreator("counter/setLoading", (loading: boolean) =>
        mergeState({ loading }),
      ),
    }),
    selectors: {
      count: (s) => s.count,
      loading: (s) => s.loading,
    },
  },
  {
    devtools: {
      name: "counter-options-name", // takes priority over config.devtools.name
      hideSetState: false,
      hideMergeState: true,
    },
  },
);

3) Priority and defaults

• If options.devtools.name is provided, it is used.
• Otherwise config.devtools.name is used (if provided).
• Otherwise the DevTools instance name is "hummbit".
• If DevTools are disabled (config.devtools: false), options.devtools has no effect.

4) What gets sent to DevTools

• action - calls created via actionCreator("name", fn) are sent with that action name.
• setState - direct full/root updates are logged as separate entries.
• mergeState - root-level shallow merges are logged as separate entries.

To keep only domain action logs, hide low-level state update entries via:

• options.devtools.hideSetState
• options.devtools.hideMergeState

5) Supported time-travel commands

• RESET - restore initial store snapshot.
• ROLLBACK - rollback to last COMMIT.
• JUMP_TO_STATE / JUMP_TO_ACTION - navigate history.
• IMPORT_STATE - import lifted state from DevTools.
• COMMIT - set current state as new base.
• PAUSE_RECORDING - pause/resume recording.

6) Global singleton mode

For global APIs (hummbit/react), configure DevTools at bootstrap:

configureGlobalStore({
  devtools: { enabled: true, name: "app-global-store" },
  middleware: [],
});

Recommendation: call configureGlobalStore(...) as early as possible at app startup.