Redux DevTools Extension
Installation
1. For Chrome
- from Chrome Web Store
- or build it with
npm i && npm run build:extension
and load the extension's folder./build/extension
- or run it in dev mode with
npm i && npm start
and load the extension's folder./dev
.
2. For Firefox
- from AMO
- or build it with
npm i && npm run build:firefox
and load the extension's folder./build/firefox
(just select a file from inside the dir).
3. For Electron
- just specify
REDUX_DEVTOOLS
inelectron-devtools-installer
.
4. For other browsers and non-browser environment
Usage
Note that before v2.7, instead of
window.__REDUX_DEVTOOLS_EXTENSION__
/window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
, it was usedwindow.devToolsExtension
, which is being deprecated.
1. With Redux
1.1 Basic store
If you have a basic store as described in the official redux-docs, simply replace:
const store = createStore(reducer);
with
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
Or with preloadedState but without middleware and enhancers arguments:
const store = createStore(reducer, preloadedState,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
Note: passing enhancer as last argument requires redux@>=3.1.0. For older versions apply it like here or here.
In case the linter doesn't allow using the underscore dangle, you need to wrap it like so:
/* eslint-disable no-underscore-dangle */
const store = createStore(reducer, preloadedState,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
/* eslint-enable */
Warning: Don't mix the old Redux API with the new one. Pass enhancers and applyMiddleware as last createStore argument.
1.2 Advanced store setup
If you setup your store with middleware and enhancers, change this:
import { createStore, applyMiddleware, compose } from 'redux';
const store = createStore(reducer, preloadedState, compose(
applyMiddleware(...middleware)
));
to:
import { createStore, applyMiddleware, compose } from 'redux';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, preloadedState, composeEnhancers(
applyMiddleware(...middleware)
));
When the extension is not installed, we’re using Redux compose here.
In case you don’t want to allow the extension in production, envify the code and add process.env.NODE_ENV !== 'production' &&
before window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
.
To specify extension’s options use it like that:
const composeEnhancers =
process.env.NODE_ENV !== 'production' &&
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
// Specify extension’s options like here name, actionsBlacklist, actionsCreators or immutablejs support
}) : compose;
const enhancer = composeEnhancers(
applyMiddleware(...middleware),
// other store enhancers if any
);
const store = createStore(reducer, enhancer);
See the post for more details.
redux-devtools-extension
package from npm
1.3 Use To make things easier, there's a npm package to install:
npm install --save redux-devtools-extension
and to use like that:
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
const store = createStore(reducer, composeWithDevTools(
applyMiddleware(...middleware),
// other store enhancers if any
));
or if needed to apply extension’s options:
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
const composeEnhancers = composeWithDevTools({
// Specify here name, actionsBlacklist, actionsCreators and other options
});
const store = createStore(reducer, composeEnhancers(
applyMiddleware(...middleware),
// other store enhancers if any
));
There’re just few lines of code. If you don’t want to allow the extension in production, just use ‘redux-devtools-extension/developmentOnly’ instead of ‘redux-devtools-extension’.
1.5 For React Native, hybrid, desktop and server side Redux apps
Include Remote Redux DevTools
's store enhancer, and from the extension's context menu choose 'Open Remote DevTools' or press Alt+Shift+arrow up for remote monitoring.
2. Without Redux
See the post for more details on how to use the extension with any architecture.
API Reference
Demo
Open these urls to test the extension:
Also you may run them from ./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.