getDefaultManagers()

getDefaultManagers 返回一个 Manager 数组，用于传给 <DataProvider />。

这样可以轻松地配置和添加自定义 Manager，同时不受默认 Manager 未来可能发生的变化影响。

目前返回 [DevToolsManager*, NetworkManager, SubscriptionManager].

*（生产构建中不包含 DevToolsManager。）

用法

Web

index.tsx

import { DataProvider, getDefaultManagers } from '@data-client/react';
import { createRoot } from 'react-dom/client';
import App from './App';

const managers = getDefaultManagers({
  // set fallback expiry time to an hour
  networkManager: { dataExpiryLength: 1000 * 60 * 60 },
});

createRoot(document.body).render(
  <DataProvider managers={managers}>
    <App />
  </DataProvider>,
);

React Native

index.tsx

import { DataProvider, getDefaultManagers } from '@data-client/react';
import { AppRegistry } from 'react-native';
import App from './App';

const managers = getDefaultManagers({
  // set fallback expiry time to an hour
  networkManager: { dataExpiryLength: 1000 * 60 * 60 },
});

const Root = () => (
  <DataProvider managers={managers}>
    <App />
  </DataProvider>
);
AppRegistry.registerComponent('MyApp', () => Root);

NextJS

app/Provider.tsx

'use client';
import { getDefaultManagers } from '@data-client/react';
import { DataProvider } from '@data-client/react/nextjs';

const managers = getDefaultManagers({
  // set fallback expiry time to an hour
  networkManager: { dataExpiryLength: 1000 * 60 * 60 },
});

export default function Provider({
  children,
}: {
  children: React.ReactNode;
}) {
  return <DataProvider managers={managers}>{children}</DataProvider>;
}

app/layout.tsx

import Provider from './Provider';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Provider>{children}</Provider>
      </body>
    </html>
  );
}

Expo

app/_layout.tsx

import { Stack } from 'expo-router';
import { DataProvider, getDefaultManagers } from '@data-client/react';

const managers = getDefaultManagers({
  // set fallback expiry time to an hour
  networkManager: { dataExpiryLength: 1000 * 60 * 60 },
});

export default function RootLayout() {
  return (
    <DataProvider managers={managers}>
      <Stack>
        <Stack.Screen name="index" />
      </Stack>
    </DataProvider>
  );
}

参数

每个参数表示对应 Manager 的配置，可以是以下三种类型之一：

• 任何普通对象都会作为选项传给该 Manager 的构造函数。
• 直接使用的 Manager 实例。
• null。传入时会排除该 Manager。

getDefaultManagers({
  devToolsManager: { trace: true },
  networkManager: new NetworkManager({ errorExpiryLength: 1 }),
  subscriptionManager: null,
});

networkManager

备注

这里不允许使用 null，因为 NetworkManager 是必需的

当 Endpoint 没有定义 dataExpiryLength 时，dataExpiryLength 将作为后备值。

当 Endpoint 没有定义 errorExpiryLength 时，errorExpiryLength 将作为后备值。

devToolsManager

传给 redux devtools 的参数。

subscriptionManager

实现了 SubscriptionConstructable 的类，例如 PollingSubscription

示例

追踪 action

例如，我们可以启用 trace 选项，帮助追踪 action 是从哪里分发的。它对性能影响很大，因此通常是禁用的。

const managers = getDefaultManagers({
  devToolsManager: { trace: true },
});

Manager 继承

传入 Manager 实例让我们可以通过继承来定制 Manager。

import { getDefaultManagers, IdlingNetworkManager } from '@data-client/react';

const managers = getDefaultManagers({
  networkManager: new IdlingNetworkManager(),
});

IdlingNetworkManager 会把无 sideEffect（只读/GET）的请求推迟到动画完成之后，以防止卡顿。在 Web 端它使用 requestIdleCallback，在 React Native 中则使用 InteractionManager.runAfterInteractions。

禁用

使用 null 会彻底移除 Manager。NetworkManager 无法通过这种方式移除。

const managers = getDefaultManagers({
  devToolsManager: null,
  subscriptionManager: null,
});

这里我们禁用了除 NetworkManager 之外的所有 Manager。

Coin App

新价格每秒会推送很多次；为了减少 devtool 中的刷屏，我们将其设置为忽略 Ticker 的 SET action。

探索 coin-app 示例

在 StackBlitz 中打开查看源码

正在加载演示…

更多演示