Redux DevTools extension.
JavaScript HTML
Latest commit 6426fc5 Jan 20, 2017 @mlucool mlucool committed with Better documention for immutablejs (#290)

README.md

Redux DevTools Extension

Join the chat at https://gitter.im/zalmoxisus/redux-devtools-extension OpenCollective OpenCollective

Demo

Installation

1. For Chrome

2. For Firefox

3. For Electron

4. For other browsers and non-browser environment

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 extension’s options like here name, actionsBlacklist, actionsCreators or immutablejs support
      }) : 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

Demo

Open these urls to test the extension:

Also you may run them from ./examples folder.

Backers

Support us with a monthly donation and help us continue our activities. [Become a backer]

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

License

MIT

Created By

If you like this, follow @mdiordiev on twitter.