Github url

redux-devtools-extension

by zalmoxisus

Redux DevTools extension.

11.7K Stars 825 Forks Last release: over 1 year ago (2.17.1) MIT License 944 Commits 81 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Redux DevTools Extension

Join the chat at https://gitter.im/zalmoxisus/redux-devtools-extensionPRs WelcomeOpenCollectiveOpenCollective

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

](https://redux.js.org/api/createstore#createstorereducer-preloadedstate-enhancer) argument is optional in Redux's [

createStore

](https://redux.js.org/api/createstore#createstorereducer-preloadedstate-enhancer).

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](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/#13-use-redux-devtools-extension-package-from-npm), 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

](https://github.com/gaearon/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.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: ```js 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 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

](https://github.com/jhen0409/react-native-debugger), which already included the same API with Redux DevTools Extension.

For most platforms, include [

Remote Redux DevTools

](https://github.com/zalmoxisus/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](https://github.com/zalmoxisus/redux-devtools-extension/tree/master/examples).

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.