v2.7.0
Pausing and locking features
Read the post for details about why and how to use them.
Deprecating the extension's enhancer
As described in the post, instead of window.devToolsExtension
(which was planned to be deprecated in favour of window.__REDUX_DEVTOOLS_EXTENSION__
), now we’ll be using window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
as following:
import { createStore, applyMiddleware, compose } from 'redux';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const enhancer = composeEnhancers(
applyMiddleware(...middleware),
// other store enhancers if any
);
const store = createStore(reducer, enhancer);
Also there's redux-devtools-extension
npm package you can install and use as following:
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
const store = createStore(reducer, composeWithDevTools(
applyMiddleware(...middleware),
// other store enhancers if any
);
When applying extension's options:
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
const composeEnhancers = composeWithDevTools({
name: 'MyApp', actionsBlacklist: ['REDUX_STORAGE_SAVE']
});
const store = createStore(reducer, composeEnhancers(
applyMiddleware(...middleware),
// other store enhancers if any
);
There’re just few lines of code. If you don’t want to allow the extension in production, just use redux-devtools-extension/developmentOnly
instead of redux-devtools-extension
.
New options
- maxAge (number) - maximum allowed actions to be stored on the history tree, the oldest actions are removed once maxAge is reached. Default is
50
. - shouldCatchErrors (boolean) - if specified as
true
, whenever there's an exception in reducers, the monitors will show the error message, and next actions will not be dispatched. - shouldRecordChanges (boolean) - if specified as
false
, it will not record the changes till clicking onStart recording
button. Default istrue
. - pauseActionType (string) - if specified, whenever clicking on
Pause recording
button and there are actions in the history log, will add this action type. If not specified, will commit when paused. Default is@@PAUSED
. - shouldStartLocked (boolean) - if specified as
true
, it will not allow any non-monitor actions to be dispatched till clicking onUnlock changes
button. Default isfalse
. - shouldHotReload boolean - if set to
false
, will not recompute the states on hot reloading (or on replacing the reducers). Default totrue
.
No error notifications by default
Even it's one of the basic features of the extension to catch errors (especially in reducers) and show which action caused that, it seems to cause bad UX for some use cases, especially for sites using the extension in production. You can enable them in the settings.