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

More info

Using this Manager allows in browser debugging and store inspection.