Need help with redux-devtools-extension?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

zalmoxisus
12.1K Stars 878 Forks MIT License 944 Commits 233 Opened issues

Description

Redux DevTools extension.

Services available

!
?

Need anything else?

Contributors list

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:

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

Note that

preloadedState
argument is optional in Redux's
createStore
.

For universal ("isomorphic") apps, prefix it with

typeof window !== 'undefined' &&
.
js
const composeEnhancers = (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;

For TypeScript use

redux-devtools-extension
npm package, which contains all the definitions, or just use

(window as any)
(see Recipes for an example).
js
const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

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

diff
+ /* 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 [email protected]>=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: ```diff import { createStore, applyMiddleware, compose } from 'redux';

  • const composeEnhancers = window.REDUXDEVTOOLSEXTENSION_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: ```js const composeEnhancers = typeof window === 'object' && window.REDUXDEVTOOLSEXTENSION_COMPOSE ?
window.REDUXDEVTOOLSEXTENSION_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 redux-devtools-extension
and to use like so: ```js 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](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#windowdevtoolsextensionconfig):
js 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
: ```js 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
: ```js 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:
js 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 environment.

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.