Scribd
Upload
74 views5 pages

Redux Devtools

This document provides instructions for installing and using the Redux DevTools extension across different browsers and environments. It describes how to add the extension to a basic Redux store as well as more advanced store setups. It also covers using the @redux-devtools/extension package from npm and options for using the extension in production environments.

Uploaded by

Mariana Madeleyne Valencia Céspedes
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
74 views5 pages

Redux Devtools

This document provides instructions for installing and using the Redux DevTools extension across different browsers and environments. It describes how to add the extension to a basic Redux store as well as more advanced store setups. It also covers using the @redux-devtools/extension package from npm and options for using the extension in production environments.

Uploaded by

Mariana Madeleyne Valencia Céspedes
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

1.

For Chrome

 from Chrome Web Store;


 or download extension.zip from last releases, unzip,
open chrome://extensions url and turn on developer mode from top left
and then click; on Load Unpacked and select the extracted folder for use
 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 Mozilla Add-ons;
 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 in electron-devtools-installer.

4. For other browsers and non-browser environment

 use remote-redux-devtools.

Usage
Note that starting from v2.7, window.devToolsExtension was renamed
to window.__REDUX_DEVTOOLS_EXTENSION__ / window.__REDUX_DEVTOOLS_EXTENSION_COM
POSE__.

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, actionsDenylist,
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, actionsDenylist, actionsCreators and other options if
needed
});
const store = createStore(
reducer,
/* preloadedState, */ composeEnhancers(
applyMiddleware(...middleware)
// other store enhancers if any
)
);

There are just a 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, actionsDenylist, 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 composeWithDevToolsLogOnlyInProduction  or devToolsEnhancerLogOnlyInProduct
ion:
import { createStore } from 'redux';
import { devToolsEnhancerLogOnlyInProduction } from
'@redux-devtools/extension';

const store = createStore(


reducer,
/* preloadedState, */ devToolsEnhancerLogOnlyInProduction()
// options like actionSanitizer, stateSanitizer
);

or with middlewares and enhancers:

import { createStore, applyMiddleware } from 'redux';


import { composeWithDevToolsLogOnlyInProduction } from
'@redux-devtools/extension';

const composeEnhancers = composeWithDevToolsLogOnlyInProduction({


// 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,


import composeWithDevToolsLogOnly or devToolsEnhancerLogOnly for production
environment.
If you don’t want to allow the extension in production, just
use composeWithDevToolsDevelopmentOnly or devToolsEnhancerDevelopmentOnly.
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.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy