Redux DevTools 扩展的使用说明1. Chrome、Firefox 2. 其它浏览器和非浏览器环境这个扩展

原文：github.com/zalmoxisus/…

安装

1. Chrome、Firefox

可以在浏览器网上商店中下载安装该扩展

2. 其它浏览器和非浏览器环境

使用remote-redux-devtools

用法

注意，从2.7开始，window.devToolsExtension重命名为window.__REDUX_DEVTOOLS_EXTENSION__/ window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__.

使用Redux

store普通用法对于基础的redux store只加添加：

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

注：preloadedState在createStore中是可选的

对于通用（“同构”）应用程序，请在其前面加上typeof window !== 'undefined' &&。

出现ESLint报错时，可以如下配置：

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

支持redux>=3.1.0 版本

store高级用法如果store使用了中间件middleware和增强器enhaners，代码要修改下：

import { createStore, applyMiddleware, compose } from 'redux';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
    reducer, /* preloadedState, */ 
    composeEnhancers(
        applyMiddleware(...middleware)
  ));

当有特殊扩展选项时，用这么使用：

const composeEnhancers = typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
  // 有指定扩展选项，像name, actionsBlacklist, actionsCreators, serialize...
}) : compose;

const enhancer = composeEnhancers(
    applyMiddleware(...middleware),
    // 其他store增强器（如果有的话）
);

const store = createStore(reducer, enhancer);

使用redux-devtools-extension包为了简化操作需要安装个npm包 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),
        // 其他store增强器（如果有的话）
));

指定扩展名选项：

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const composeEnhancers = composeWithDevTools({
  // 如果需要，在这里指定名称，actionsBlacklist，actionsCreators和其他选项
});
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
  applyMiddleware(...middleware),
  // 其他store增强器（如果有的话）
));

如果你没有包含其它增强器和中间件的话，只需要使用devToolsEnhancer

import { createStore } from 'redux';
import { devToolsEnhancer } from 'redux-devtools-extension';

const store = createStore(reducer, /* preloadedState, */ devToolsEnhancer(
  // 需要的话，在这里指定名称，actionsBlacklist，actionsCreators和其他选项
));

在生产环境中使用这个扩展在生产环境也是有用的，但一般都是在开发环境中使用它。如果你想限制它的使用，可以用redux-devtools-extension/logOnlyInProduction：
```
import { createStore } from 'redux';
import { devToolsEnhancer } from 'redux-devtools-extension/logOnlyInProduction';

const store = createStore(reducer, /* preloadedState, */         devToolsEnhancer(
    // actionSanitizer, stateSanitizer等选项
));
```
使用中间件和增强器时：
```
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),
  // 其它增强器
));
```
你将不得不在webpack的生产环境打包配置中加上process.env.NODE_ENV': JSON.stringify('production')。如果你用的是create-react-app，那么它已经帮你配置好了

如果你在创建store时检查过process.env.NODE_ENV，那么也包括了生产环境的redux-devtools-extension/logOnly 如果不想在生产环境使用扩展，那就只开启redux-devtools-extension/developmentOnly就好

点击文章查看更多细节
对于react-native, hybrid, desktop 和服务端的redux应用程序
- react-native 可以用和redux DevTools Extension一样api的react-native-debugger工具。
- 大多数平台，包括remote redux devtool's 的store增强器，可以通过扩展上下文的菜单中选择'open remote devtools' 来远程监控。

没有使用Redux

关于怎么使用体系结构的扩展，请参考以下集合链接和博客文章

DOC

Demo

使用扩展的demo:

另见 ./examples .