redux-devtools/extension/docs/Recipes.md

Recipes

Using in a typescript project

The recommended way is to use @redux-devtools/extension npm package, which contains all typescript definitions. Or you can just use window as any:

const store = createStore(
  rootReducer,
  initialState,
  (window as any).__REDUX_DEVTOOLS_EXTENSION__ &&
    (window as any).__REDUX_DEVTOOLS_EXTENSION__()
);

Note that you many need to set no-any to false in your tslint.json file.

Alternatively you can use type-guard in order to avoid casting to any.

import { createStore, StoreEnhancer } from 'redux';

// ...

type WindowWithDevTools = Window & {
  __REDUX_DEVTOOLS_EXTENSION__: () => StoreEnhancer<unknown, {}>;
};

const isReduxDevtoolsExtenstionExist = (
  arg: Window | WindowWithDevTools,
): arg is WindowWithDevTools => {
  return '__REDUX_DEVTOOLS_EXTENSION__' in arg;
};

// ...

const store = createStore(
  rootReducer,
  initialState,
  isReduxDevtoolsExtenstionExist(window)
    ? window.__REDUX_DEVTOOLS_EXTENSION__()
    : undefined,
);

Export from browser console or from application

store.liftedStore.getState();

The extension is not sharing store object, so you should take care of that.

Applying multiple times with different sets of options

We're not allowing that from instrumentation part, which can be used it like so:

import { createStore, compose } from 'redux';
import { devToolsEnhancerLogOnly } from '@redux-devtools/extension';

const store = createStore(
  reducer,
  /* preloadedState, */ compose(
    devToolsEnhancerLogOnly({
      instaceID: 1,
      name: 'Denylisted',
      actionsDenylist: '...',
    }),
    devToolsEnhancerLogOnly({
      instaceID: 2,
      name: 'Allowlisted',
      actionsAllowlist: '...',
    }),
  ),
);