Integración con Redux

Usar redux es totalmente opcional. Sin embargo, para muchos significa una integración o migración sencilla con proyectos existentes, o simplemente una buena abstracción centralizada para manejar el estado.

just Reactive Data Client

index.tsx

import {
  ExternalDataProvider,
  prepareStore,
  type Middleware,
} from '@data-client/react/redux';
import { getDefaultManagers, Controller } from '@data-client/react';
import { createRoot } from 'react-dom/client';
import App from './App';

const managers = getDefaultManagers();
// be sure to include your other reducers here
const otherReducers = {};
const extraMiddlewares: Middleware[] = [];
// for instance, state serialized from the server
const initialState = {};

const { store, selector, controller } = prepareStore(
  initialState,
  managers,
  Controller,
  otherReducers,
  extraMiddlewares,
);

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

with React-Redux

index.tsx

import {
  ExternalDataProvider,
  prepareStore,
  type Middleware,
} from '@data-client/react/redux';
import { getDefaultManagers, Controller } from '@data-client/react';
import { Provider } from 'react-redux';
import { createRoot } from 'react-dom/client';
import App from './App';

const managers = getDefaultManagers();
// be sure to include your other reducers here
const otherReducers = {};
const extraMiddlewares: Middleware[] = [];
// for instance, state serialized from the server
const initialState = {};

const { store, selector, controller } = prepareStore(
  initialState,
  managers,
  Controller,
  otherReducers,
  extraMiddlewares,
);

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

Luego querrás usar <ExternalDataProvider /> en lugar de <DataProvider /> y pasarle el store y una función selectora para obtener la parte del estado específica de Reactive Data Client.

Note

Solo debes usar UN provider; anidar otro provider sobrescribirá el anterior.

Note

Como los middlewares de manager de Reactive Data Client devuelven promesas, todos los middlewares de redux se colocan después de los Managers.

Si necesitas que un middleware se ejecute antes que los managers, tendrás que envolverlo en un manager.