mocheng / redux-devtools-extension

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.

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.

2. Without Redux

See the post for more details on how to use the extension with any architecture.

API Reference

• Parameters
• Methods
• Create Redux store right in the extension.

Demo

Open these urls to test the extension:

• Counter
• TodoMVC
• Redux Router
• Redux Form

Also you may run them from ./examples folder.

License

MIT

Created By

If you like this, follow @mdiordiev on twitter.