Original text: github.com/zalmoxisus/…

The installation

1. Chrome, Firefox

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

2. Other browsers and non-browser environments

  • Use the remote – story – devtools

usage

Note that starting with 2.7, window.devToolsextension was renamed to window.__redux_devtools_extension__ / window.__redux_devtools_extension_compose__.

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. If store uses middleware and enhancer Enhaners, the code needs to change:

    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. Install –save-dev redux-devtools-extension NPM install –save-dev redux-devtools-extension

    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 typically used in a development environment. If you want to limit its use, can use redux – devtools – the 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. For React-Native, Hybrid, Desktop, and server-side Redux applications

    • 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

DOC

  • parameter
  • Methods the API
  • Create redux Store debugging
  • Q&A
  • troubleshooting
  • The article
  • video
  • feedback

Demo

Using the extended demo:

  • counter
  • TodoMVC
  • The story form
  • React Tetris
  • Books collection

See. / examples.