DevToolsManager

class DevToolsManager implements Manager

Se integra con Redux DevTools para hacer seguimiento del estado y las acciones. Nota: no se integra con el viaje en el tiempo.

Agrega la extensión de Chrome o la extensión de Firefox a tu navegador para empezar.

implements

DevToolsManager implementa Manager

constructor(options?, skipLogging?)

options

Argumentos que se envían a redux devtools.

Por ejemplo, podemos habilitar la opción trace para ayudar a rastrear desde dónde se despachan las acciones.

Web

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

React Native

index.tsx

import { DataProvider, getDefaultManagers } from '@data-client/react';
import { AppRegistry } from 'react-native';
import App from './App';

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

const Root = () => (
  <DataProvider managers={managers}>
    <App />
  </DataProvider>
);
AppRegistry.registerComponent('MyApp', () => Root);

NextJS

app/Provider.tsx

'use client';
import { getDefaultManagers } from '@data-client/react';
import { DataProvider } from '@data-client/react/nextjs';

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

export default function Provider({
  children,
}: {
  children: React.ReactNode;
}) {
  return <DataProvider managers={managers}>{children}</DataProvider>;
}

app/layout.tsx

import Provider from './Provider';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Provider>{children}</Provider>
      </body>
    </html>
  );
}

Expo

app/_layout.tsx

import { Stack } from 'expo-router';
import { DataProvider, getDefaultManagers } from '@data-client/react';

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

export default function RootLayout() {
  return (
    <DataProvider managers={managers}>
      <Stack>
        <Stack.Screen name="index" />
      </Stack>
    </DataProvider>
  );
}

skipLogging

(action: ActionTypes) => boolean

Permite omitir algunas acciones para que no se registren en las devtools del navegador.

Por defecto omite las acciones fetch en curso

Web

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

React Native

index.tsx

import {
  DataProvider,
  DevToolsManager,
  getDefaultManagers,
} from '@data-client/react';
import { AppRegistry } from 'react-native';
import App from './App';

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

const Root = () => (
  <DataProvider managers={managers}>
    <App />
  </DataProvider>
);
AppRegistry.registerComponent('MyApp', () => Root);

NextJS

app/Provider.tsx

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

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

export default function Provider({
  children,
}: {
  children: React.ReactNode;
}) {
  return <DataProvider managers={managers}>{children}</DataProvider>;
}

app/layout.tsx

import Provider from './Provider';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Provider>{children}</Provider>
      </body>
    </html>
  );
}

Expo

app/_layout.tsx

import { Stack } from 'expo-router';
import {
  DataProvider,
  DevToolsManager,
  getDefaultManagers,
} from '@data-client/react';

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

export default function RootLayout() {
  return (
    <DataProvider managers={managers}>
      <Stack>
        <Stack.Screen name="index" />
      </Stack>
    </DataProvider>
  );
}

Omitir actualizaciones de alta frecuencia

Al usar WebSockets u otras fuentes de datos en tiempo real, las actualizaciones de alta frecuencia pueden saturar la extensión DevTools. Usa la opción predicate para filtrar tipos de acciones o schemas específicos:

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

Acceso programático al store

En modo de desarrollo, DevToolsManager registra cada Controller en globalThis.__DC_CONTROLLERS__, un Map cuya clave es el nombre de la conexión de devtools. Esto funciona en navegadores, React Native y 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();

Esto es útil para que los asistentes de programación con IA que usan Chrome DevTools MCP o Expo MCP inspeccionen e interactúen programáticamente con el store. Cada DataProvider se registra de forma independiente, por lo que se admiten sin problema varios providers en la misma página.

Los controllers se eliminan del mapa cuando se llama a cleanup().

Más información

Usar este Manager permite depurar e inspeccionar el store en el navegador.