Redux DevTools Extension

ps : If this project is not handled well, There is a warning (“Unresolved variable REDUX_DEVTOOLS_EXTENSION and REDUX_DEVTOOLS_EXTENSION) in webstorm

The installation

1. Chrome, Firefox

You can download and install the extension from your browser’s web store

  • Chrome
  • Firefox

2. Other browsers and non-browser environments

  • Use the remote – story – devtools

usage

Use Redux

1). Store common usage for the base redux store only adds:

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

Note: preloadedState is optional in createStore

For generic (” isomorphic “) applications, precede them with typeof Window! = = ‘undefined &&.

When ESLint reports an error, you can configure it as follows:

+ /* eslint-disable no-underscore-dangle */
  const store = createStore(
   reducer, /* preloadedState, */
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );
+ /* eslint-enable */
Copy the code

Support redux>=3.1.0

2).store advanced usage if store uses middlewaremiddlewareAnd the intensifierenhaners, the code needs to be modified:

import { createStore, applyMiddleware, compose } from 'redux'; const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const store = createStore( reducer, /* preloadedState, */ composeEnhancers( applyMiddleware(... middleware) ));Copy the code

When there are special extension options, use this:

const composeEnhancers = typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   Window.__redux_devtools_extension_compose__ ({// have specified extension options like name, actionsBlacklist, actionsCreators, serialize... }) : compose; const enhancer = composeEnhancers( applyMiddleware(... Middleware), // Other Store enhancers (if available)); const store = createStore(reducer, enhancer);Copy the code

3) useredux-devtools-extensionPackage To simplify operations you need to install an NPM packagenpm install --save-dev redux-devtools-extensionuse

import { createStore, applyMiddleware } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension'; const store = createStore(reducer, composeWithDevTools( applyMiddleware(... Middleware), // other Store enhancers (if available)));Copy the code

Specify extension options:

import { createStore, applyMiddleware } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension'; Const composeEnhancers = composeWithDevTools({// Specify the name here, actionsBlacklist, actionsCreators and other options if required}); const store = createStore(reducer, /* preloadedState, */ composeEnhancers( applyMiddleware(... Middleware), // other Store enhancers (if available)));Copy the code

If you don’t include other enhancers and middleware, just use devToolsEnhancer

import { createStore } from 'redux'; import { devToolsEnhancer } from 'redux-devtools-extension'; Const store = createStore(reducer, /* preloadedState, */ devToolsEnhancer(// If needed, specify the name here, actionsBlacklist, ActionsCreators and other options));Copy the code

4). Using this extension in a production environment is also useful in a production environment, but it is generally used in a development environment. If you want to limit its use, you can use itredux-devtools-extension/logOnlyInProduction:

import { createStore } from 'redux'; import { devToolsEnhancer } from 'redux-devtools-extension/logOnlyInProduction'; Const store = createStore(Reducer, /* preloadedState, */ devToolsEnhancer(// actionSanitizer, stateSanitizer));Copy the code

When using middleware and enhancers:

import { createStore, applyMiddleware } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction'; Const composeEnhancers = composeWithDevTools({// actionSanitizer, stateSanitizer}); const store = createStore(reducer, /* preloadedState, */ composeEnhancers( applyMiddleware(... Middleware), // other enhancers));Copy the code

You will have to add process.env.node_env ‘: json.stringify (‘production’) to the production environment packaging configuration for Webpack. If you’re using create-React-app, it’s already configured for you

If you check process.env.node_env when creating a store, then redux-devtools-extension/logOnly is also included in production. If you don’t want to use the extension in production, It will have to be open redux – devtools – the extension/developmentOnly is fine

Click on the article for more details

5). Forreact-native.hybrid.desktopAnd the server-side Redux application

  • You can use the React-Native debugger with the same API as the Redux DevTools Extension.

  • Most platforms, including Remote Redux DevTool’s Store enhancer, can be monitored remotely by selecting ‘Open Remote DevTools’ from the extension context menu.

Redux is not used

For information on how to use the architecture extension, please refer to the following collection links and blog posts

note

2020-02-25: Remove the hints before 2.7