跳到主要内容

DevToolsManager

class DevToolsManager implements Manager

与 Redux DevTools 集成，用于跟踪状态和 action。注意：不支持时间旅行（time-travel）。

在浏览器中安装 Chrome 扩展或 Firefox 扩展即可开始使用。

implements

DevToolsManager 实现了 Manager

constructor(options?, skipLogging?)​

options​

传给 redux devtools 的参数。

例如，我们可以启用 trace 选项，帮助追踪 action 是从哪里 dispatch 的。

index.tsx
import { DataProvider, getDefaultManagers } from '@data-client/react';
import { createRoot } from 'react-dom/client';
import App from './App';

const managers = getDefaultManagers({
  devToolsManager: { trace: true },
});

createRoot(document.body).render(
  <DataProvider managers={managers}>
    <App />
  </DataProvider>,
);

skipLogging​

(action: ActionTypes) => boolean

可以跳过某些 action，使其不记录到浏览器 devtool 中。

默认会跳过进行中的 fetch action

index.tsx
import {
  DataProvider,
  DevToolsManager,
  getDefaultManagers,
} from '@data-client/react';
import { createRoot } from 'react-dom/client';
import App from './App';

// production builds leave out DevToolsManager
const managers = getDefaultManagers({
  devToolsManager: new DevToolsManager(undefined, () => true),
});

createRoot(document.body).render(
  <DataProvider managers={managers}>
    <App />
  </DataProvider>,
);

跳过高频更新​

使用 WebSocket 或其他实时数据源时，高频更新可能会让 DevTools 扩展不堪重负。使用 predicate 选项过滤掉特定的 action 类型或 schema：

managers.ts
import { getDefaultManagers, actionTypes } from '@data-client/react';
import { Ticker } from './resources/Ticker';

const managers = getDefaultManagers({
  devToolsManager: {
    // Increase latency buffer for high-frequency updates
    latency: 1000,
    // Skip WebSocket SET actions for Ticker to reduce log spam
    // (including batched set([Ticker], rows) writes)
    predicate: (state, action) =>
      action.type !== actionTypes.SET ||
      (action.schema !== Ticker && action.schema[0] !== Ticker),
  },
});

以编程方式访问 store​

在开发模式下，DevToolsManager 会把每个 Controller 注册到 globalThis.__DC_CONTROLLERS__ 上，这是一个以 devtools 连接名为键的 Map。它还会以相同的键，在 globalThis.__DC_ACTIONS__ 上记录每个 Controller 最近派发的 action。无论是否安装了 Redux DevTools 扩展，它都适用于浏览器、React Native 和 Node。

Browser DevTools console
// List all registered providers
__DC_CONTROLLERS__.keys();

// Get state from the first provider
__DC_CONTROLLERS__.values().next().value.getState();

// Get state by name
__DC_CONTROLLERS__.get('Data Client: My App').getState();

// Last 10 actions, including the ones dispatched while the page loaded
__DC_ACTIONS__.get('Data Client: My App').slice(-10);

这对使用 Chrome DevTools MCP 或 Expo MCP 的 AI 编程助手很有用，它们可以借此以编程方式检查 store 并与之交互。每个 DataProvider 都会独立注册，因此支持同一页面上存在多个 provider。当某个名字已被占用时，下一个会注册为 'Data Client: My App (2)'，依此类推；设置 name 可以为每个 store 指定一个易于辨认的键。在没有 window 的环境中（例如服务端渲染时），store 会改为替换掉同名的上一个 store，因为每个请求的 store 永远不会被清理。

action 日志最多保留 maxAge 两倍数量的 action（默认 100 个），并像扩展一样跳过相同的重复 fetch。为了减少内存占用，只有最新的 20 个 action 会保留 args 和 response；更早的 action 只保留 type、key、endpoint、meta 和错误响应。当某个 endpoint 在轮询时，日志对每个键（endpoint 与参数）只保留最后 maxPollingActions 个 action（默认 4 个，即最后两次轮询），这样轮询就不会把其他内容挤出去：

index.tsx
import { DataProvider, getDefaultManagers } from '@data-client/react';
import { createRoot } from 'react-dom/client';
import App from './App';

const managers = getDefaultManagers({
  devToolsManager: { maxPollingActions: 10 },
});

createRoot(document.body).render(
  <DataProvider managers={managers}>
    <App />
  </DataProvider>,
);

调用 cleanup() 时，Controller 及其日志会被移除。生产构建中不存在以上任何内容。

更多信息​

使用这个 Manager 可以在浏览器中进行调试和 store 检查。