Extended API and helper package to use in production

Restricting available features

Now it's possible to restrict restrict the extension, just specify the features you allow:

const composeEnhancers = composeWithDevTools({
  features: {
    pause: true, // start/pause recording of dispatched actions
    lock: true, // lock/unlock dispatching actions and side effects    
    persist: true, // persist states on page reloading
    export: true, // export history of actions in a file
    import: 'custom', // import history of actions from a file
    jump: true, // jump back and forth (time travelling)
    skip: true, // skip (cancel) actions
    reorder: true, // drag and drop actions in the history list 
    dispatch: true, // dispatch custom actions or action creators
    test: true // generate tests for the selected actions
  },
  // other options like actionSanitizer, stateSanitizer
});

If not specified, all of the features are enabled. When set as an object, only those included as true will be allowed.
Note that except true/false, import and export can be set as custom (which is by default for Redux enhancer), meaning that the importing/exporting occurs on the client side. Otherwise, you'll get/set the data right from the monitor part.

Production optimized package

It's useful to include the extension in production as well. See the blog post for more details.

If you want to restrict it there, use redux-devtools-extension/logOnlyInProduction:

import { createStore } from 'redux';
import { devToolsEnhancer } from 'redux-devtools-extension/logOnlyInProduction';

const store = createStore(reducer, /* preloadedState, */ devToolsEnhancer(
  // options like actionSanitizer, stateSanitizer
));

or with middlewares and enhancers:

 import { createStore, applyMiddleware } from 'redux';
 import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction';

 const composeEnhancers = composeWithDevTools({
   // options like actionSanitizer, stateSanitizer
 });
 const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
   applyMiddleware(...middleware),
   // other store enhancers if any
 ));

You'll have to add 'process.env.NODE_ENV': JSON.stringify('production') in your Webpack config for the production bundle (to envify). If you use react-create-app, it already does it for you.

If you're already checking process.env.NODE_ENV when creating the store, include redux-devtools-extension/logOnly for production enviroment.

Extended API

• autoPause, filter, serialize, latency, stateSanitizer, actionSanitizer

See API reference for more details.