Integração com Redux

Usar o redux é completamente opcional. No entanto, para muitos isso significa integração ou migração fáceis com projetos existentes, ou simplesmente uma boa abstração centralizada de gerenciamento de 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>,
);

Em seguida, você vai querer usar o <ExternalDataProvider /> em vez do <DataProvider /> e passar o store e uma função selector para obter a parte do estado específica do Reactive Data Client.

Note

Você deve usar apenas UM provider; aninhar outro provider sobrescreverá o anterior.

Note

Como os middlewares dos managers do Reactive Data Client retornam promises, todos os middlewares do redux são colocados depois dos Managers.

Se você precisar que um middleware rode antes dos managers, será necessário envolvê-lo em um manager.