Hummbitv1.x

Redux DevTools: подробности

Ниже полный практический гайд по подключению и настройке.

1) Как подключается Redux DevTools

  1. Установите расширение браузера Redux DevTools (Chrome/Edge/Firefox).
  2. Создайте store через initStore(...) или настройте глобальный store через configureGlobalStore(...).
  3. Убедитесь, что DevTools включены:
    • по умолчанию auto mode: включены при NODE_ENV !== "production";
    • либо явно через config.devtools.
  4. Откройте вкладку расширения Redux DevTools в браузере и выберите нужный store по имени.

Пример явного включения для instance-store:

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.devtools vs options.devtools

config.devtools (первый аргумент initStore)

Управляет фактом подключения DevTools:

  • devtools: true — включить (с именем по умолчанию "hummbit").
  • devtools: false — выключить.
  • devtools: { enabled: boolean, name?: string } — явная конфигурация.

options.devtools (второй аргумент initStore)

Управляет именем и фильтрацией событий в логе:

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

Пример с полной конфигурацией:

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", // приоритетнее, чем config.devtools.name
      hideSetState: false,
      hideMergeState: true,
    },
  },
);

3) Приоритеты и поведение по умолчанию

  • Если options.devtools.name задан, используется он.
  • Иначе используется config.devtools.name, если задан.
  • Иначе имя в DevTools будет "hummbit".
  • Если DevTools отключены (config.devtools: false), параметры из options.devtools не применяются.

4) Какие события уходят в DevTools

  • action — вызовы actionCreator("name", fn) попадают как экшены с указанным именем.
  • setState — отдельные записи прямых обновлений root state.
  • mergeState — отдельные записи shallow merge по корню.

При необходимости setState и mergeState можно скрыть через:

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

Это полезно, когда хотите оставлять в логе только доменные экшены (actionCreator).

5) Time-travel команды, которые поддерживаются

  • RESET — вернуть snapshot начального состояния store.
  • ROLLBACK — откат к последнему COMMIT.
  • JUMP_TO_STATE / JUMP_TO_ACTION — перемещение по истории.
  • IMPORT_STATE — импорт lifted state из DevTools.
  • COMMIT — зафиксировать текущую точку как новую базу.
  • PAUSE_RECORDING — пауза/возобновление записи.

6) Global singleton mode

Для глобального API (hummbit/react) DevTools настраиваются через bootstrap:

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

Рекомендация: вызывать configureGlobalStore(...) как можно раньше при старте приложения.

Автор: Alexey TolkachevLinkedIn