redux-devtools-extension README

The project's README from github.com/zalmoxisus/redux-devtools-extension. As one markdown file: README.md.

⚠️⚠️⚠️🚨🚨🚨⚠️⚠️⚠️

This repo is no longer the home of the redux-devtools-extension. The new home is https://github.com/reduxjs/redux-devtools. Please file your issues and PRs there.

⚠️⚠️⚠️🚨🚨🚨⚠️⚠️⚠️

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's createStore.

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

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).

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:

+ /* 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 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 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]

<img src="https://opencollective.com/redux-devto

redux-devtools-extension (zalmoxisus/redux-devtools-extension)

Searching Database…

13.4K ·GitHub
Redux-devtools-extension
What is this?A browser extension for Redux apps: once you point it at your store, you get DevTools for watching actions and state while you develop.
How do I install the extension?Install from the Chrome Web Store, or from Mozilla Add-ons for Firefox. You can also build it yourself: npm i && npm run build:extension, then load the ./build/extension folder as an unpacked extension.
Do I need to add any npm packages to my app to use it?Nothing needs installing — you just wrap your store with the extension's enhancer. Don't npm install redux-devtools (that's a different lib); for TypeScript use the redux-devtools-extension package instead. The enhancer setup needs redux@>=3.1.0.
The README starts with a big warning — is this repo still the place for the extension?Not anymore — this repo is no longer the home of the extension. It has moved to a new home, and issues and PRs should be filed there.
Does it work outside Chrome, like in Firefox or Electron apps?Yes — Firefox has its own build on Mozilla Add-ons, and Electron apps load it via electron-devtools-installer. For other browsers or non-browser setups the README points to remote-redux-devtools; React Native apps can use react-native-debugger, which includes the same API.
Can I use it in production or only while developing?You can include it in production — the README says it's useful there. Restrict it with redux-devtools-extension/logOnlyInProduction or disable it with developmentOnly; create-react-app already handles the NODE_ENV envify, otherwise add it to your Webpack config.
What if my app isn't built on Redux?It can still hook in — the README links integrations for using the extension with any architecture, and one of the live demos is an Angular ngrx store example.
My guide says to use window.devToolsExtension but it's undefined — why?That global was renamed in v2.7: use window.__REDUX_DEVTOOLS_EXTENSION__ or window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ instead.
Can I try it before wiring it into my own app?Yes — the README links live demos: Counter, TodoMVC, Redux Form, React Tetris and an Angular ngrx Book Collection, plus an ./examples folder in the repo.
What are similar projects?redux-devtools, devtools-v6, react-devtools, web-source-inspect, zustand, responsively-app, reactide, openreplay
Which topics is it in?debug, redux, extension, firefox-extension, devtools, state-management, debugging, chrome-extension, electron, web-development, react, npm
Creator
zalmoxisus
Size
11.3 MB
Stars
13.4K
Updated
CommitJan 18Release2.17.1Jan 25
Age
10y
Commits · 90 Days