getDefaultManagers()

getDefaultManagers devuelve un Array de Managers para enviar a <DataProvider />.

Esto facilita configurar y agregar Managers personalizados, a la vez que te protege frente a posibles cambios en los managers por defecto.

Actualmente devuelve [DevToolsManager*, NetworkManager, SubscriptionManager].

*(DevToolsManager se excluye en las compilaciones de producción.)

Uso

Web

index.tsx

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

const managers = getDefaultManagers({
  // set fallback expiry time to an hour
  networkManager: { dataExpiryLength: 1000 * 60 * 60 },
});

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({
  // set fallback expiry time to an hour
  networkManager: { dataExpiryLength: 1000 * 60 * 60 },
});

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({
  // set fallback expiry time to an hour
  networkManager: { dataExpiryLength: 1000 * 60 * 60 },
});

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({
  // set fallback expiry time to an hour
  networkManager: { dataExpiryLength: 1000 * 60 * 60 },
});

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

Argumentos

Cada argumento representa la configuración de un manager. Puede ser de tres tipos:

• Cualquier objeto plano se usa como opciones que se envían al constructor del manager.
• Una instancia del manager que se usará directamente.
• null. Al enviarlo, se excluye el manager.

getDefaultManagers({
  devToolsManager: { trace: true },
  networkManager: new NetworkManager({ errorExpiryLength: 1 }),
  subscriptionManager: null,
});

networkManager

nota

null no está permitido aquí porque NetworkManager es obligatorio

dataExpiryLength se usa como valor de respaldo cuando un Endpoint no tiene definido dataExpiryLength.

errorExpiryLength se usa como valor de respaldo cuando un Endpoint no tiene definido errorExpiryLength.

devToolsManager

Argumentos que se envían a redux devtools.

subscriptionManager

Una clase que implementa SubscriptionConstructable, como PollingSubscription

Ejemplos

Rastreo de acciones

Por ejemplo, podemos habilitar la opción trace para ayudar a rastrear desde dónde se despachan las acciones. Esto tiene un gran impacto en el rendimiento, por lo que normalmente está deshabilitada.

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

Herencia de managers

Enviar instancias de manager nos permite personalizar los managers mediante herencia.

import { getDefaultManagers, IdlingNetworkManager } from '@data-client/react';

const managers = getDefaultManagers({
  networkManager: new IdlingNetworkManager(),
});

IdlingNetworkManager puede evitar los tirones retrasando los fetch sin sideEffect (de solo lectura/GET) hasta que terminen las animaciones. Funciona en la web mediante requestIdleCallback, y en React Native mediante InteractionManager.runAfterInteractions.

Deshabilitar

Usar null elimina los managers por completo. NetworkManager no se puede eliminar de esta forma.

const managers = getDefaultManagers({
  devToolsManager: null,
  subscriptionManager: null,
});

Aquí deshabilitamos todos los managers excepto NetworkManager.

Coin App

Se transmiten nuevos precios muchas veces por segundo; para reducir el ruido en las devtools, lo configuramos para ignorar las acciones SET de Ticker.

Explora el ejemplo coin-app

Abrir en StackBlitzVer código fuente

Loading demo…

More Demos