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,
);
store.liftedStore.getState();
The extension is not sharing store
object, so you should take care of that.
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: '...',
}),
),
);