Redux DevTools Extension

Installation

1. For Chrome

from Chrome Web Store
or build it with npm i && npm run build:extension and load the extension's folder ./build/extension
or run it in dev mode with npm i && npm start and load the extension's folder ./dev.

2. For Firefox

from AMO
or build it with npm i && npm run build:firefox and load the extension's folder ./build/firefox (just select a file from inside the dir).

3. For Electron

just specify REDUX_DEVTOOLS in electron-devtools-installer.

4. For other browsers and non-browser environment

use remote-redux-devtools.

Usage

Note that before v2.7, instead of window.__REDUX_DEVTOOLS_EXTENSION__ / window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__, it was used window.devToolsExtension, which is being deprecated.

1. With Redux

1.1 Basic store

If you have a basic store as described in the official redux-docs, simply replace:

const store = createStore(reducer);

with

const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

Or with preloadedState but without middleware and enhancers arguments:

const store = createStore(reducer, preloadedState, 
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

Note: passing enhancer as last argument requires redux@>=3.1.0. For older versions apply it like here or here.

In case the linter doesn't allow using the underscore dangle, you need to wrap it like so:

/* eslint-disable no-underscore-dangle */
const store = createStore(reducer, preloadedState, 
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
/* eslint-enable */

Warning: Don't mix the old Redux API with the new one. Pass enhancers and applyMiddleware as last createStore argument.

1.2 Advanced store setup

If you setup your store with middleware and enhancers, change this:

import { createStore, applyMiddleware, compose } from 'redux';

const store = createStore(reducer, preloadedState, compose(
  applyMiddleware(...middleware)
));

to:

import { createStore, applyMiddleware, compose } from 'redux';
 
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, preloadedState, composeEnhancers(
  applyMiddleware(...middleware)
));

When the extension is not installed, we’re using Redux compose here.

In case you don’t want to allow the extension in production, envify the code and add process.env.NODE_ENV !== 'production' && before window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__.

To specify extension’s options use it like that:

const composeEnhancers =
  process.env.NODE_ENV !== 'production' &&
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      // Specify here name, actionsBlacklist, actionsCreators and other options
    }) : compose;

const enhancer = composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
);
const store = createStore(reducer, enhancer);

See the post for more details.

1.3 Use `redux-devtools-extension` package from npm

To make things easier, there's a npm package to install:

npm install --save redux-devtools-extension

and to use like that:

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

const store = createStore(reducer, composeWithDevTools(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

or if needed to apply extension’s options:

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

const composeEnhancers = composeWithDevTools({
  // Specify here name, actionsBlacklist, actionsCreators and other options
});
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’.

1.5 For React Native, hybrid, desktop and server side Redux apps

Include Remote Redux DevTools's store enhancer, and from the extension's context menu choose 'Open Remote DevTools' or press Alt+Shift+arrow up for remote monitoring.