Redux DevTools 深度使用指南：从入门到精通-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00994/article/details/148378310

Redux DevTools 深度使用指南：从入门到精通

redux-devtools reduxjs/redux-devtools: Redux-DevTools 是一个用于 Redux 的开发工具，可以用于调试和优化 Redux 应用程序，支持多种 Redux 功能和工具，如 Redux，Redux-Thunk，React-Redux 等。项目地址: https://gitcode.com/gh_mirrors/re/redux-devtools

前言

Redux DevTools 是 Redux 应用开发的必备调试工具，它提供了强大的时间旅行调试功能。本文将全面介绍 Redux DevTools 的两种主要集成方式，并深入讲解手动集成的各个技术细节。

浏览器扩展：快速开始方案

对于大多数开发者来说，浏览器扩展是最便捷的选择。它无需额外安装和配置，开箱即用，支持以下特性：

内置多种常用监视器
支持动作过滤功能
零配置即可使用
跨页面调试能力

扩展方案适合快速开发和调试场景，但灵活性相对有限。如需深度定制，仍需采用手动集成方式。

手动集成：完全控制方案

手动集成虽然步骤较多，但提供了完全的定制能力，适合以下场景：

需要自定义监视器布局
开发自定义监视器组件
需要精细控制调试功能

安装准备

首先安装核心包和常用监视器：

npm install --save-dev @redux-devtools/core
npm install --save-dev @redux-devtools/log-monitor
npm install --save-dev @redux-devtools/dock-monitor

创建 DevTools 组件

在项目中创建专门的 DevTools 组件，组合使用各种监视器：

import React from 'react';
import { createDevTools } from '@redux-devtools/core';
import LogMonitor from '@redux-devtools/log-monitor';
import DockMonitor from '@redux-devtools/dock-monitor';

const DevTools = createDevTools(
  <DockMonitor
    toggleVisibilityKey="ctrl-h"
    changePositionKey="ctrl-q"
    defaultIsVisible={true}
  >
    <LogMonitor theme="tomorrow" />
  </DockMonitor>
);

export default DevTools;

这种组合方式将 LogMonitor 嵌套在 DockMonitor 中，提供了可停靠的调试面板。你也可以直接使用 LogMonitor 而不嵌套：

const DevTools = createDevTools(<LogMonitor theme="solarized" />);

配置 Store 增强器

DevTools.instrument() 方法创建了一个 store 增强器，必须正确配置：

import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from '../reducers';
import DevTools from '../containers/DevTools';

const enhancer = compose(
  applyMiddleware(middleware1, middleware2),
  DevTools.instrument()
);

const store = createStore(rootReducer, initialState, enhancer);

关键注意事项：

必须在 applyMiddleware 之后调用
可以配置选项如 maxAge 和 shouldCatchErrors
生产环境必须移除

状态持久化技巧

通过 persistState 增强器可以实现调试会话的持久化：

import { persistState } from '@redux-devtools/core';

const enhancer = compose(
  applyMiddleware(middleware),
  DevTools.instrument(),
  persistState(getDebugSessionKey())
);

function getDebugSessionKey() {
  const matches = window.location.href.match(/[?&]debug_session=([^&#]+)\b/);
  return matches?.[1] ?? null;
}

这样可以通过 URL 参数保存和恢复调试会话状态。

生产环境优化

必须确保 DevTools 不会进入生产环境，推荐做法：

使用环境变量区分配置
创建单独的配置文件
利用构建工具移除死代码

示例配置结构：

store/
  configureStore.js       // 入口文件
  configureStore.dev.js   // 开发配置
  configureStore.prod.js // 生产配置

Webpack 配置示例：

plugins: [
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('production')
  })
]

渲染 DevTools 组件

推荐使用条件渲染方案：

// Root.js
if (process.env.NODE_ENV === 'production') {
  module.exports = require('./Root.prod');
} else {
  module.exports = require('./Root.dev');
}

// Root.dev.js
import DevTools from './DevTools';

export default class Root extends Component {
  render() {
    return (
      <Provider store={store}>
        <div>
          <App />
          <DevTools />
        </div>
      </Provider>
    );
  }
}

独立窗口方案

也可以将 DevTools 渲染到独立窗口：

// showDevTools.js
export default function showDevTools(store) {
  const popup = window.open(null, 'Redux DevTools', '...');
  popup.document.write('<div id="react-devtools-root"></div>');
  render(<DevTools store={store} />, popup.document.getElementById('react-devtools-root'));
}