Skip to content

v2.7.0

Compare
Choose a tag to compare
@zalmoxisus zalmoxisus released this 04 Oct 12:20
· 313 commits to master since this release

Pausing and locking features

Read the post for details about why and how to use them.

pausing

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 on Start recording button. Default is true.
  • 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 on Unlock changes button. Default is false.
  • shouldHotReload boolean - if set to false, will not recompute the states on hot reloading (or on replacing the reducers). Default to true.

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.