Redux integration

Using redux is completely optional. However, for many it means easy integration or migration with existing projects, or just a nice centralized state management abstraction.

just Reactive Data Client

index.tsx

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

const managers = getDefaultManagers();
// be sure to include your other reducers here
const otherReducers = {};
const extraMiddlewares: Middleware = [];

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

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

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 ReactDOM from 'react-dom';

const managers = getDefaultManagers();
// be sure to include your other reducers here
const otherReducers = {};
const extraMiddlewares: Middleware = [];

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

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

Then you'll want to use the <ExternalDataProvider /> instead of <DataProvider /> and pass in the store and a selector function to grab the Reactive Data Client specific part of the state.

Note

You should only use ONE provider; nested another provider will override the previous.

Note

Because Reactive Data Client manager middlewares return promises, all redux middlewares are placed after the Managers.

If you need a middlware to run before the managers, you will need to wrap it in a manager.