Skip to content
W3S101

Redux - Devtools

Redux - DevTools

Section titled “Redux - DevTools”

Redux DevTools provide an incredibly powerful debugging environment for your Redux application. They allow you to inspect every action dispatched, view the state changes that resulted, and even ‘time travel’ by reverting or replaying actions.

Redux DevTools 为你的 Redux 应用提供了一个非常强大的调试环境 (debugging environment)。它们允许你检查 (inspect) 派发的每一个 action，查看由此导致的状态变化 (state changes)，甚至可以进行“时间旅行 (time travel)”，通过回退 (reverting) 或重放 (replaying) action 来调试。

Redux DevTools Extension

Section titled “Redux DevTools Extension”

Redux DevTools 扩展程序

Section titled “Redux DevTools 扩展程序”

The most common way to use Redux DevTools is via the Redux DevTools Extension, a browser extension available for Chrome, Firefox, Edge, and other browsers.

使用 Redux DevTools 最常见的方式是通过 Redux DevTools Extension，这是一个可用于 Chrome、Firefox、Edge 和其他浏览器的浏览器扩展程序 (browser extension)。

Installation Links:

安装链接：

Once installed, you need to configure your Redux store to connect to the extension.

安装后，你需要配置你的 Redux store 以连接到该扩展程序。

Integration with Redux Toolkit

Section titled “Integration with Redux Toolkit”

与 Redux Toolkit 集成

Section titled “与 Redux Toolkit 集成”

If you are using Redux Toolkit’s configureStore, the DevTools Extension integration is enabled automatically in development mode. No extra setup is usually required!

如果你正在使用 Redux Toolkit 的 configureStore，DevTools Extension 的集成 (integration) 在开发模式下是自动启用的。通常不需要额外的设置！

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';


const store = configureStore({
  reducer: rootReducer,
  // devTools: true 在开发模式下是默认值
  // 你可以显式禁用它：
  // devTools: process.env.NODE_ENV !== 'production',
});

As long as the extension is installed in your browser and your app is running in a development environment, configureStore handles the connection.

只要该扩展程序已安装在你的浏览器中，并且你的应用正在开发环境 (development environment) 中运行，configureStore 就会处理好连接。

Manual Integration (Legacy or Custom Setups)

Section titled “Manual Integration (Legacy or Custom Setups)”

手动集成（旧版或自定义设置）

Section titled “手动集成（旧版或自定义设置）”

If you are using the legacy createStore or have a custom setup, you need to add the enhancer provided by the extension.

如果你正在使用旧版 createStore 或有自定义设置，你需要添加该扩展程序提供的 enhancer。

import { createStore, applyMiddleware, compose } from 'redux';
import { thunk } from 'redux-thunk'; // 示例 middleware
import rootReducer from './reducers';


// 检查扩展程序是否存在并添加其 enhancer
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;


const store = createStore(
  rootReducer,
  /* preloadedState, */
  composeEnhancers(
    applyMiddleware(thunk)
    // 在这里添加其他 store enhancer
  )
);

This uses compose to combine applyMiddleware with the DevTools enhancer. window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ is injected by the browser extension.

这里使用了 compose 来将 applyMiddleware 与 DevTools enhancer 结合 (combine) 起来。window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 由浏览器扩展程序注入 (injected)。

Key Features

Section titled “Key Features”

主要功能

Section titled “主要功能”

Once connected, open your browser’s developer tools and look for the ‘Redux’ tab. You’ll find powerful features:

连接后，打开你的浏览器开发者工具 (developer tools)，找到 ‘Redux’ 选项卡 (tab)。你会发现强大的功能：

  • Action Inspector: See a log of every action dispatched, including its type and payload.
  • Action 检查器： 查看所有派发 action 的日志，包括其类型和负载 (payload)。
  • State Inspector: View the entire state tree before and after each action. You can explore the state object easily.
  • State 检查器： 查看每个 action 发生前后的整个状态树。你可以轻松地探索状态对象。
  • Diff Inspector: See exactly what parts of the state tree changed as a result of an action.
  • Diff 检查器： 精确查看状态树的哪些部分因 action 而发生变化。
  • Time Travel Debugging:
  • 时间旅行调试：
    • Jump: Click the ‘Jump’ button next to an action in the log to revert the state back to how it was just after that action was processed.
    • 跳转 (Jump)： 点击日志中某个 action 旁边的 ‘Jump’ 按钮，可以将状态回退 (revert) 到该 action 处理之后的样子。
    • Skip: Click the ‘Skip’ button to disable a specific action and see how the state would look if that action never occurred. This is great for isolating the effect of specific actions.
    • 跳过 (Skip)： 点击 ‘Skip’ 按钮可以禁用 (disable) 某个特定的 action，看看如果该 action 从未发生过，状态会是什么样子。这对于隔离特定 action 的影响非常有用。
  • Dispatcher: Manually dispatch actions directly from the DevTools to test reducers or trigger state changes without interacting with the UI.
  • 派发器 (Dispatcher)： 直接从 DevTools 手动派发 action，用于测试 reducer 或触发状态变化，而无需与 UI 交互。
  • Import/Export: Save and load sessions, allowing you to share debugging states.
  • 导入/导出： 保存和加载会话 (sessions)，让你能够共享调试状态。
  • Charting: Visualize your state tree.
  • 图表： 将你的状态树可视化 (visualize)。
  • Performance Monitoring: Check how long reducers take to process actions.
  • 性能监控： 检查 reducer 处理 action 需要多长时间。

For example, if you dispatched actions A, B, and C, the log shows them in order. If you ‘Jump’ to action B, the state shown will be the state after B completed, effectively undoing C. If you ‘Skip’ action B, the state will reflect the result of A followed directly by C, as if B never happened.

例如，如果你派发了 action A、B 和 C，日志会按顺序显示它们。如果你“跳转”到 action B，显示的状态将是 B 完成后的状态，这有效地撤销 (undoing) 了 C。如果你“跳过” action B，状态将反映 A 之后直接跟随 C 的结果，就像 B 从未发生过一样。

Redux DevTools are an indispensable tool for understanding data flow, debugging issues, and verifying the behavior of your Redux application.

Redux DevTools 是理解数据流 (data flow)、调试问题和验证 Redux 应用行为的不可或缺的工具 (indispensable tool)。