Skip to content
Redux DevTools extension.
Branch: master
Clone or download
Latest commit d127175 Feb 3, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Added reductive to integrations (#631) Jan 18, 2019
examples Update examples (#621) Jan 5, 2019
npm-package Bump npm package Feb 2, 2019
src v2.17.1 Jan 25, 2019
test Stack trace options (#612) Dec 18, 2018
webpack Update webpack and use terser instead of uglify Dec 18, 2018
.babelrc Update to Babel 6 Dec 14, 2015
.bookignore Implement gitbook Feb 5, 2017
.eslintignore [docs] Examples of using custom types for `serialize` Feb 5, 2017
.eslintrc
.gitignore
.travis.yml Update selenium-webdriver Jan 10, 2017
CHANGELOG.md Update demo urls Aug 29, 2016
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Nov 16, 2018
LICENSE Update description of the packages and manifest Feb 4, 2017
README.md Update NgRx Integration example (#623) Jan 7, 2019
SUMMARY.md Implement gitbook Feb 5, 2017
appveyor.yml Update selenium-webdriver Jan 10, 2017
book.json
gulpfile.babel.js Remove in extension script for firefox Nov 14, 2018
package.json v2.17.1 Jan 25, 2019
yarn.lock Fix error-polyfills issues (which appear on codesandbox) Jan 25, 2019

README.md

Redux DevTools Extension

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

Demo

Installation

1. For Chrome

2. For Firefox

3. For Electron

4. For other browsers and non-browser environment

Usage

Note that starting from v2.7, window.devToolsExtension was renamed to window.__REDUX_DEVTOOLS_EXTENSION__ / window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__.

1. With Redux

1.1 Basic store

For a basic Redux store simply add:

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

Note that preloadedState argument is optional in Redux' createStore.

For universal ("isomorphic") apps, prefix it with typeof window !== 'undefined' &&.

For TypeScript use redux-devtools-extension npm package, which contains all the definitions, or just use (window as any) (see Recipes for an example).

In case ESLint is configured to not allow using the underscore dangle, wrap it like so:

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

Note: Passing enhancer as last argument requires redux@>=3.1.0. For older versions apply it like here or here. Don't mix the old Redux API with the new one.

You don't need to npm install redux-devtools when using the extension (that's a different lib).

1.2 Advanced store setup

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

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

+ const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+ const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
- const store = createStore(reducer, /* preloadedState, */ compose(
    applyMiddleware(...middleware)
  ));

Note that when the extension is not installed, we’re using Redux compose here.

To specify extension’s options, use it like so:

const composeEnhancers =
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
    }) : 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 an npm package to install:

npm install --save-dev redux-devtools-extension

and to use like so:

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

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

To specify extension’s options:

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

const composeEnhancers = composeWithDevTools({
  // Specify name here, actionsBlacklist, actionsCreators and other options if needed
});
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

There’re just few lines of code added to your bundle.

In case you don't include other enhancers and middlewares, just use devToolsEnhancer:

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

const store = createStore(reducer, /* preloadedState, */ devToolsEnhancer(
  // Specify name here, actionsBlacklist, actionsCreators and other options if needed
));

1.4 Using in production

It's useful to include the extension in production as well. Usually you can use it for development.

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 create-react-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.

If you don’t want to allow the extension in production, just use redux-devtools-extension/developmentOnly.

See the article for more details.

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

For React Native we can use react-native-debugger, which already included the same API with Redux DevTools Extension.

For most platforms, include Remote Redux DevTools's store enhancer, and from the extension's context menu choose 'Open Remote DevTools' for remote monitoring.

2. Without Redux

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

Docs

Demo

Live demos to use the extension with:

Also see ./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.

You can’t perform that action at this time.