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.
- from Chrome Web Store;
- or download
extension.zipfrom last releases, unzip, openchrome://extensionsurl and turn on developer mode from top left and then click; onLoad Unpackedand select the extracted folder for use - or build it with
npm i && npm run build:extensionand load the extension's folder./build/extension; - or run it in dev mode with
npm i && npm startand load the extension's folder./dev.
- from Mozilla Add-ons;
- or build it with
npm i && npm run build:firefoxand load the extension's folder./build/firefox(just select a file from inside the dir).
- just specify
REDUX_DEVTOOLSinelectron-devtools-installer.
Note that starting from v2.7,
window.devToolsExtensionwas renamed towindow.__REDUX_DEVTOOLS_EXTENSION__/window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__.
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-extensionnpm 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-devtoolswhen using the extension (that's a different lib).
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);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
));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 usecreate-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.
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.
See integrations and the blog post for more details on how to use the extension with any architecture.
Live demos to use the extension with:
Also see ./examples folder.
Support us with a monthly donation and help us continue our activities. [Become a backer]
Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]
MIT
If you like this, follow @mdiordiev on twitter.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
