Redux 集成

使用 redux 完全是可选的。不过对很多人来说，它意味着可以轻松地与现有项目集成或迁移，或者只是一个不错的集中式状态管理抽象。

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>,
);

然后你需要使用 <ExternalDataProvider /> 来代替 <DataProvider />，并传入 store 和一个 selector 函数，用于取出状态中属于 Reactive Data Client 的部分。

注意

你只应使用一个 provider；嵌套另一个 provider 会覆盖之前的那个。

注意

由于 Reactive Data Client 的 manager 中间件会返回 promise，所有 redux 中间件都会被放在 Managers 之后。

如果你需要某个中间件在 managers 之前运行，就需要把它包装在一个 manager 中。