redux devtools extension

️ ️ ️ ️ ️ ️

此存储库不再是 redux-devtools-extension 的所在地。新主页是 https://github.com/reduxjs/redux-devtools。请在那里提交您的问题和 PR。

️ ️ ️ ️ ️ ️

Redux DevTools 扩展

安装

1. 对于 Chrome

• 来自 Chrome 网上应用店；
• 或者下载最新版本的extension.zip ，解压，打开chrome://extensions url并从左上角打开开发者模式，然后单击； Load Unpacked并选择要使用的解压文件夹
• 或使用npm i && npm run build:extension构建它并加载扩展的文件夹./build/extension ；
• 或者使用npm i && npm start在开发模式下运行它并加载扩展的文件夹./dev 。

2. 对于火狐浏览器

• 来自 Mozilla 附加组件；
• 或使用npm i && npm run build:firefox构建它并加载扩展的文件夹./build/firefox （只需从目录中选择一个文件）。

3. 对于电子

• 只需在electron-devtools-installer中指定REDUX_DEVTOOLS即可。

4. 对于其他浏览器和非浏览器环境

• 使用remote-redux-devtools 。

用法

请注意，从 v2.7 开始， window.devToolsExtension已重命名为window.__REDUX_DEVTOOLS_EXTENSION__ / window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 。

1. 使用 Redux

1.1 基础商店

对于基本的 Redux 存储，只需添加：

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

请注意， preloadedState参数在 Redux 的createStore中是可选的。

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

 const composeEnhancers = ( typeof window !== 'undefined' && window . __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ) || compose ;

对于 TypeScript，请使用redux-devtools-extension npm 包，其中包含所有定义，或者仅使用(window as any) （有关示例，请参阅食谱）。

 const composeEnhancers = ( window as any ) . __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose ;

如果 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 。对于旧版本，请像此处或此处一样应用它。不要将旧的 Redux API 与新的 API 混合在一起。

使用扩展时，您不需要 npm install redux-devtools （这是一个不同的库）。

1.2 高级商店设置

如果您使用中间件和增强器设置商店，请更改：

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

请注意，当未安装扩展时，我们在此处使用 Redux compose。

要指定扩展的选项，请像这样使用它：

 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 包：

 npm install --save 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
) ) ;

要指定扩展的选项：

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

只需添加几行代码到您的包中即可。

如果您不包含其他增强器和中间件，只需使用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 生产中使用

将扩展包含在生产中也很有用。通常你可以用它来进行开发。

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

或使用中间件和增强器：

 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 配置中添加'process.env.NODE_ENV': JSON.stringify('production') （以 envify）。如果您使用create-react-app ，它已经为您完成了。

如果您在创建存储时已经检查了process.env.NODE_ENV ，请在生产环境中包含redux-devtools-extension/logOnly 。

如果您不想在生产中允许扩展，只需使用redux-devtools-extension/developmentOnly 。

请参阅文章了解更多详细信息。

1.5 对于 React Native、混合、桌面和服务器端 Redux 应用程序

对于React Native，我们可以使用react-native-debugger ，它已经包含了与Redux DevTools Extension相同的API。

对于大多数平台，包括Remote Redux DevTools的存储增强器，并从扩展的上下文菜单中选择“打开 Remote DevTools”以进行远程监控。

2. 没有 Redux

有关如何在任何架构中使用扩展的更多详细信息，请参阅集成和博客文章。

文档

• 选项（参数）
• 方法（高级 API）
• 常问问题
• 特征
  • 跟踪操作调用
• 故障排除
• 文章
• 视频
• 反馈

演示

使用该扩展的现场演示：

• 柜台
• 都都MVC
• 回归形式
• 反应俄罗斯方块
• 书籍收藏（Angular ngrx 商店）

另请参阅./examples文件夹。

支持者

每月捐款支持我们，并帮助我们继续我们的活动。 [成为支持者]

赞助商

成为赞助商并在 Github 上的自述文件中获取您的徽标以及指向您网站的链接。 [成为赞助商]

执照

麻省理工学院

创建者

如果你喜欢这个，请在​​ Twitter 上关注@mdiordiev。