Redux DevTools 扩展的使用说明

原文：github.com/zalmoxisus/…

安装

---

1. Chrome、Firefox

• 能够在浏览器网上商店中下载安装该扩展

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

• 使用remote-redux-devtools

用法

---

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

使用Redux

1. 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 版本

2. 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);
   复制代码

3. 使用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和其余选项
   ));
   复制代码

4. 在生产环境中使用 这个扩展在生产环境也是有用的，但通常都是在开发环境中使用它。 若是你想限制它的使用，能够用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就好

   点击文章查看更多细节

5. 对于react-native, hybrid, desktop 和 服务端的redux应用程序

   • react-native 能够用和redux DevTools Extension同样api的react-native-debugger工具。

   • 大多数平台，包括remote redux devtool's 的store加强器，能够经过扩展上下文的菜单中选择'open remote devtools' 来远程监控。

没有使用Redux

---

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

DOC

---

• 参数
• 方法 API
• 建立redux store 调试
• 常见问题
• 故障排除
• 文章
• 视频
• 反馈

Demo

使用扩展的demo:

• 计数器
• TodoMVC
• Redux 表格
• React 俄罗斯方块
• 书籍收集

另见 ./examples .