React模块开发redux-devtools-extension调试工具

用法

注意，从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 作为最后一个参数传递需要redux@>=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:

扫描二维码关注公众号，回复： 4379663 查看本文章

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”进行远程监控。