用法

注意，從v2.7開始, window.devToolsExtension 被重新命名為 window.__REDUX_DEVTOOLS_EXTENSION__ / window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__.

1. With Redux

1.1 Basic store

對於基本的Redux store儲存，只需新增即可

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

注意，preloadedState引數在Redux中是可選的 createStore.

對於通用("isomorphic")應用程式，在它前面加上字首 typeof window !== 'undefined' &&.

如果ESLint被配置為不允許使用下劃線，則可以這樣包裝:

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

注意:將enhancer 作為最後一個引數傳遞需要[email protected]>=3.1.0。對於較老的版本，可以這樣應用它。不要將舊的Redux API與新API混淆。

在使用擴充套件時，不需要npm安裝redux-devtools(這是另一種庫)。

1.2 Advanced store setup

如果您使用middleware and enhancers來設定儲存，則這樣修改:

  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)
  ));

注意，當extension 沒有安裝時，我們這樣使用Redux。

要指定 extension’s options可以這樣使用:

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);

1.3 使用npm安裝redux-devtools-extension 包

  用npm安裝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 any
));

指定 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
));

將這幾行程式碼新增到程式碼中。

如果你的程式碼不包含其他的 enhancers and middlewares,則像這樣使用 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
));

1.4 在生成環境中使用

在production 中包含extension 也是很有用的。通常您可以使用它進行development。

如果你想限制它, 使用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
));

或使用 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
));

你必須在您的Webpack配置中用於生產包("production")中新增process.env.NODE_ENV':JSON.stringify('production')。如果你使用create-react-app則不需要。

如果在建立store時你已經檢查process.env.NODE_ENV，包括redux-devtools-extension/logOnly用於生產環境

如果你不想在生成環境中使用extension，則使用redux-devtools-extension/developmentOnly.

1.5 For React Native, hybrid, desktop and server side Redux apps

對於React Native，我們可以使用react-native-debugger，它包含與Redux DevTools extension 相同的API。

For most platforms, include Remote Redux DevTools's store enhancer, and from the extension's context menu choose 'Open Remote DevTools' for remote monitoring.

對於大多數平臺包括Remote Redux DevTools的store enhancer，和從extension的上下文中選擇“Open Remote DevTools”進行遠端監控。