zalmoxisus/redux-devtools-extensionPublic

NotificationsYou must be signed in to change notification settings
Fork1k
Star13.5k

Redux DevTools extension.

License

MIT license

13.5k stars 1k forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 945 Commits
docs		docs
examples		examples
npm-package		npm-package
src		src
test		test
webpack		webpack
.babelrc		.babelrc
.bookignore		.bookignore
.eslintignore		.eslintignore
.eslintrc		.eslintrc
.gitignore		.gitignore
.travis.yml		.travis.yml
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
LICENSE		LICENSE
README.md		README.md
SUMMARY.md		SUMMARY.md
appveyor.yml		appveyor.yml
book.json		book.json
gulpfile.babel.js		gulpfile.babel.js
package.json		package.json
yarn.lock		yarn.lock

Repository files navigation

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

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

Installation

1. For Chrome

fromChrome Web Store;
or downloadextension.zip fromlast releases, unzip, openchrome://extensions url and turn on developer mode from top left and then click; onLoad Unpacked and select the extracted folder for use
or build it withnpm i && npm run build:extension andload the extension's folder./build/extension;
or run it in dev mode withnpm i && npm start andload the extension's folder./dev.

2. For Firefox

fromMozilla Add-ons;
or build it withnpm i && npm run build:firefox andload the extension's folder./build/firefox (just select a file from inside the dir).

3. For Electron

just specifyREDUX_DEVTOOLS inelectron-devtools-installer.

4. For other browsers and non-browser environment

useremote-redux-devtools.

Usage

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

1. With Redux

1.1 Basic store

For a basicRedux store simply add:

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

Note thatpreloadedState argument is optional in Redux'screateStore.

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

constcomposeEnhancers=(typeofwindow!=='undefined'&&window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__)||compose;

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

constcomposeEnhancers=(windowasany).__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 requiresredux@>=3.1.0. For older versions apply it likehere orhere. Don't mix the old Redux API with the new one.

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

1.2 Advanced store setup

If you setup your store withmiddleware 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 specifyextension’s options, use it like so:

constcomposeEnhancers=typeofwindow==='object'&&window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({// Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...}) :compose;constenhancer=composeEnhancers(applyMiddleware(...middleware),// other store enhancers if any);conststore=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';conststore=createStore(reducer,composeWithDevTools(applyMiddleware(...middleware),// other store enhancers if any));

To specifyextension’s options:

import{createStore,applyMiddleware}from'redux';import{composeWithDevTools}from'redux-devtools-extension';constcomposeEnhancers=composeWithDevTools({// Specify name here, actionsBlacklist, actionsCreators and other options if needed});conststore=createStore(reducer,/* preloadedState, */composeEnhancers(applyMiddleware(...middleware),// other store enhancers if any));

There’re justfew lines of code added to your bundle.

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

import{createStore}from'redux';import{devToolsEnhancer}from'redux-devtools-extension';conststore=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 youcan use it for development.

If you want to restrict it there, useredux-devtools-extension/logOnlyInProduction:

import{createStore}from'redux';import{devToolsEnhancer}from'redux-devtools-extension/logOnlyInProduction';conststore=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';constcomposeEnhancers=composeWithDevTools({// options like actionSanitizer, stateSanitizer});conststore=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 usecreate-react-app,it already does it for you.

If you're already checkingprocess.env.NODE_ENV when creating the store, includeredux-devtools-extension/logOnly for production environment.

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

Seethe article for more details.

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

For React Native we can usereact-native-debugger, which already includedthe same API with Redux DevTools Extension.

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