<ExternalDataProvider />

Integra stores externos con Reactive Data Client. Debe colocarse lo más arriba posible en el árbol de la aplicación, ya que los hooks solo se pueden usar en componentes que estén por debajo del provider en el árbol de React.

aviso

Es un reemplazo de <DataProvider />; NO uses ambos a la vez

Instalación

Uso

index.tsx

import { ExternalDataProvider } from '@data-client/react/redux';
import { createRoot } from 'react-dom/client';

import { store, selector, controller } from './store';
import App from './App';

createRoot(document.body).render(
  <ExternalDataProvider
    store={store}
    selector={selector}
    controller={controller}
  >
    <App />
  </ExternalDataProvider>,
);

Consulta el ejemplo con redux para ver un ejemplo más completo.

Props

store

interface Store<S> {
  subscribe(listener: () => void): () => void;
  getState(): S;
}

El store solo necesita ajustarse a esta interfaz. Una implementación común es un store de redux, pero en teoría se podría usar cualquier store externo.

Lee más sobre cómo integrar redux.

selector

(state: S) => State<unknown>

Esta función se usa para obtener la parte del árbol de estado del store que corresponde a Reactive Data Client.

controller

Instancia de Controller que se usará.

devButton

En desarrollo aparece un pequeño botón que da acceso fácil a las devtools del navegador, si están instaladas. Esta opción configura dónde aparece, o, si es null, lo deshabilita por completo.

'bottom-right' | 'bottom-left' | 'top-right'| 'top-left' | null = 'bottom-right'

Disable button

import { ExternalDataProvider } from '@data-client/react/redux';
import { store, selector, controller } from './store';
import App from './App';

<ExternalDataProvider
  store={store}
  selector={selector}
  controller={controller}
  devButton={null}
>
  <App />
</ExternalDataProvider>;

Place in top right corner

import { ExternalDataProvider } from '@data-client/react/redux';
import { store, selector, controller } from './store';
import App from './App';

<ExternalDataProvider
  store={store}
  selector={selector}
  controller={controller}
  devButton="top-right"
>
  <App />
</ExternalDataProvider>;