getDefaultManagers()

getDefaultManagers retorna um Array de Managers para ser enviado ao <DataProvider />.

Isso facilita configurar e adicionar Managers personalizados, mantendo a robustez diante de possíveis mudanças nos managers padrão.

Atualmente retorna [DevToolsManager*, NetworkManager, SubscriptionManager].

*(DevToolsManager é excluído nos builds de produção.)

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 a configuração de um manager. Ele pode ser de três tipos:

• Qualquer objeto simples é usado como opções a serem enviadas ao construtor do manager.
• Uma instância do manager, usada diretamente.
• null. Quando enviado, exclui o manager.

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

networkManager

observação

null não é permitido aqui, pois o NetworkManager é obrigatório

dataExpiryLength é usado como fallback quando um Endpoint não tem dataExpiryLength definido.

errorExpiryLength é usado como fallback quando um Endpoint não tem errorExpiryLength definido.

devToolsManager

Argumentos a enviar ao redux devtools.

subscriptionManager

Uma classe que implementa SubscriptionConstructable, como PollingSubscription

Exemplos

Rastreando actions

Por exemplo, podemos ativar a opção trace para ajudar a descobrir de onde as actions são despachadas. Ela tem um grande impacto no desempenho, por isso normalmente fica desativada.

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

Herança de managers

Enviar instâncias de managers nos permite personalizá-los por meio de herança.

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

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

O IdlingNetworkManager pode evitar travamentos ao adiar os fetches sem sideEffect (somente leitura/GET) até que as animações terminem. Na web isso funciona com requestIdleCallback, e no react native com InteractionManager.runAfterInteractions.

Desativando

Usar null remove os managers por completo. O NetworkManager não pode ser removido dessa forma.

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

Aqui desativamos todos os managers, exceto o NetworkManager.

Coin App

Novos preços chegam por streaming muitas vezes por segundo; para reduzir o spam nas devtools, configuramos para ignorar as actions SET de Ticker.

Explore o exemplo coin-app

Abrir no StackBlitzVer código-fonte

Loading demo…

More Demos