DevToolsManager

class DevToolsManager implements Manager

Integrates with Redux DevTools to track state and actions. Note: does not integrate time-travel.

Add the chrome extension or firefox extension to your browser to get started.

implements

DevToolsManager implements Manager

constructor(options?, skipLogging?)

options

Arguments to send to redux devtools.

For example, we can enable the trace option to help track down where actions are dispatched from.

index.tsx

import {
  DevToolsManager,
  DataProvider,
  getDefaultManagers,
} from '@data-client/react';
import ReactDOM from 'react-dom';

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

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

skipLogging

(action: ActionTypes) => boolean

Can skip some actions to be registered in the browser devtool.

By default will skip inflight fetch actions

index.tsx

import {
  DevToolsManager,
  DataProvider,
  getDefaultManagers,
} from '@data-client/react';
import ReactDOM from 'react-dom';

const managers =
  process.env.NODE_ENV !== 'production'
    ? [
        new DevToolsManager(undefined, () => true),
        ...getDefaultManagers().filter(
          manager => manager.constructor.name !== 'DevToolsManager',
        ),
      ]
    : getDefaultManagers();

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

Skipping high-frequency updates

When using WebSockets or other real-time data sources, high-frequency updates can overwhelm the DevTools extension. Use the predicate option to filter out specific action types or schemas:

index.tsx

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
    predicate: (state, action) =>
      action.type !== actionTypes.SET || action.schema !== Ticker,
  },
});

Programmatic store access

In development mode, DevToolsManager registers each Controller on globalThis.__DC_CONTROLLERS__ — a Map keyed by the devtools connection name. This works in browsers, React Native, and 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();

This is useful for AI coding assistants using the Chrome DevTools MCP or Expo MCP to programmatically inspect and interact with the store. Each DataProvider registers independently, so multiple providers on the same page are fully supported.

Controllers are removed from the map when cleanup() is called.

More info

Using this Manager allows in browser debugging and store inspection.