Skip to main content

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

More info​

Using this Manager allows in browser debugging and store inspection.