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,
  CacheProvider,
  getDefaultManagers,
} from '@data-client/react';
import ReactDOM from 'react-dom';

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

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

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,
  CacheProvider,
  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(
  <CacheProvider managers={managers}>
    <App />
  </CacheProvider>,
);

More info

Using this Manager allows in browser debugging and store inspection.