如何在单个React应用中集成多个LaunchDarkly项目？

LaunchDarkly的React Web官方文档提供了单个项目功能标志的入门示例：

import { asyncWithLDProvider } from 'launchdarkly-react-client-sdk';

(async () => {
  const LDProvider = await asyncWithLDProvider({
    clientSideID: 'client-side-id-123abc',
    user: {
      "key": "user-key-123abc",
      "name": "Sandy Smith",
      "email": "sandy@example.com"
    },
    options: { /* ... */ }
  });

  render(
    <LDProvider>
      <YourApp />
    </LDProvider>,
    document.getElementById('reactDiv'),
  );
})();

但我需要集成多个LD项目的功能标志（也就是多个clientSideID），能不能通过单个Provider实现？

我尝试嵌套多个不同client ID的Provider，但只能访问最内层Provider的功能标志，外层的完全用不了：

import { asyncWithLDProvider } from 'launchdarkly-react-client-sdk';

(async () => {
  const LDProvider1 = await asyncWithLDProvider({
    clientSideID: 'client-side-id-123abc',
    user: {
      "key": "user-key-123abc",
      "name": "Sandy Smith",
      "email": "sandy@example.com"
    },
  });

  const LDProvider2 = await asyncWithLDProvider({
    clientSideID: 'client-side-id-zzzzzz',
    user: {
      "key": "user-key-123abc",
      "name": "Sandy Smith",
      "email": "sandy@example.com"
    },
  });

  render(
    <LDProvider1>
    <LDProvider2>
      <YourApp />
    </LDProvider2>
    </LDProvider1>,
    document.getElementById('reactDiv'),
  );
})();

解决方案：手动创建多个LD客户端实例，自定义上下文管理 #

嵌套Provider的方式不可行，因为LaunchDarkly的React Provider会覆盖上下文里的客户端实例，所以只能拿到最内层的那个。要同时访问多个项目的标志，得手动初始化多个客户端，再自己封装访问逻辑：

1. 初始化多个LD客户端 #

直接使用LaunchDarkly的JavaScript SDK创建多个客户端实例，每个对应一个项目的clientSideID：

import { initialize } from 'launchdarkly-js-client-sdk';

const user = {
  key: "user-key-123abc",
  name: "Sandy Smith",
  email: "sandy@example.com"
};

// 初始化项目1的客户端
const ldClient1 = initialize('client-side-id-123abc', user);
// 初始化项目2的客户端
const ldClient2 = initialize('client-side-id-zzzzzz', user);

// 等待客户端初始化完成
await Promise.all([ldClient1.waitForInitialization(), ldClient2.waitForInitialization()]);

2. 自定义上下文Provider，传递多个客户端 #

自己写一个React Context，把多个LD客户端传递给子组件：

import { createContext, useContext } from 'react';

// 创建自定义上下文
const MultiLDContext = createContext({
  client1: null,
  client2: null
});

// 自定义Provider组件
export function MultiLDProvider({ children, client1, client2 }) {
  return (
    <MultiLDContext.Provider value={{ client1, client2 }}>
      {children}
    </MultiLDContext.Provider>
  );
}

// 自定义Hook，方便组件获取客户端
export function useMultiLD() {
  return useContext(MultiLDContext);
}

3. 在应用中使用自定义Provider #

把初始化好的客户端传入自定义Provider，然后在组件里通过Hook访问不同项目的标志：

// 初始化客户端的代码放在这里，确保初始化完成后再渲染应用
(async () => {
  // ... 上面的客户端初始化代码 ...

  render(
    <MultiLDProvider client1={ldClient1} client2={ldClient2}>
      <YourApp />
    </MultiLDProvider>,
    document.getElementById('reactDiv')
  );
})();

4. 在组件中获取不同项目的功能标志 #

使用自定义Hook拿到客户端，然后调用variation方法获取对应项目的标志：

import { useMultiLD } from './MultiLDProvider';

function YourComponent() {
  const { client1, client2 } = useMultiLD();

  // 获取项目1的标志
  const flagFromProject1 = client1.variation('your-flag-key-1', false);
  // 获取项目2的标志
  const flagFromProject2 = client2.variation('your-flag-key-2', false);

  return (
    <div>
      {flagFromProject1 && <p>项目1的标志已开启</p>}
      {flagFromProject2 && <p>项目2的标志已开启</p>}
    </div>
  );
}

注意事项 #

• 每个客户端都会单独和LaunchDarkly服务器建立连接，要考虑性能和带宽消耗，避免初始化过多客户端。
• 如果用户信息需要更新，要分别调用每个客户端的identify方法更新用户。
• 记得在应用卸载时调用每个客户端的close方法，清理资源。

内容的提问来源于stack exchange，提问作者tscbpl