实现Launchdarkly在React中的功能,无需包装在组件中。

huangapple go评论52阅读模式
英文:

Implement Launchdarkly with function in react without wrapping in Component

问题

I am currently following the guidelines provided by launchdarkly, and as per documentation, I used the following code:

import { asyncWithLDProvider } from 'launchdarkly-react-client-sdk';
(async () => {
  const LDProvider = await asyncWithLDProvider({
    clientSideID: 'CLIENT_SIDE_ID',
    context: {
      "kind": "user",
      "key": "KEY",
      "name": "NAME",
      "email": "abc@example.com"
    },
  });
  render(
    <LDProvider>
      <ControllerPage />
    </LDProvider>,
    document.getElementById('reactDiv'),
  );
})();

This somehow creates a problem as it's not working properly.

Also, this is not my requirement. Even if it works, I don't want to wrap my code with <LDProvider></LDProvider>. So, I am asking if there is any solution for this problem that I can use launchdarkly implementation using a function without wrapping my code with <LDProvider></LDProvider>.

英文:

Currently I am following the guidelines provided by launchdarkly and as per documentation I used:

import { asyncWithLDProvider } from &#39;launchdarkly-react-client-sdk&#39;;
(async () =&gt; {
  const LDProvider = await asyncWithLDProvider({
    clientSideID: &#39;CLIENT_SIDE_ID&#39;,
    context: {
      &quot;kind&quot;: &quot;user&quot;,
      &quot;key&quot;: &quot;KEY&quot;,
      &quot;name&quot;: &quot;NAME&quot;,
      &quot;email&quot;: &quot;abc@example.com&quot;
    },
  });
  render(
    &lt;LDProvider&gt;
      &lt;ControllerPage /&gt;
    &lt;/LDProvider&gt;,
    document.getElementById(&#39;reactDiv&#39;),
  );
})();

This somehow create problem as it's not working properly .

Also this is not my requirement even if it work I don't want to wrap my read code with &lt;LDProvider&gt;&lt;/LDProvider&gt;.
So i am asking is there any solution for this problem that I can use launchdarkly implementation using function without Wrapping my code with &lt;LDProvider&gt;&lt;/LDProvider&gt; .

答案1

得分: 1

以下是您要翻译的内容:

NPM包:

npm install launchdarkly-js-client-sdk

代码:

import * as LDClient from 'launchdarkly-js-client-sdk';

const randomString = Math.random().toString(36).slice(2);
const newUser = {
    "kind": "user",
    "key": `guest-user-${randomString}`,
    "name": `guest-user-${randomString}`,
    "email": `guest-user-${randomString}@email.com`
};
const ldclient = await LDClient.initialize('LAUNCHDARKLY_ID', newUser);
ldclient.on("ready", () => {
    const flagData = ldclient.allFlags();
    const flagResponse = flagData['feature_name'];
    if (flagResponse != undefined && flagResponse) {
        //  Do this
    } else {
        // Do this
    }
});

上述代码用于评估所有标志。如果您想要评估特定的标志,那么代码如下:

import * as LDClient from 'launchdarkly-js-client-sdk';

const randomString = Math.random().toString(36).slice(2);
const newUser = {
    "kind": "user",
    "key": `guest-user-${randomString}`,
    "name": `guest-user-${randomString}`,
    "email": `guest-user-${randomString}@email.com`
};
const ldclient = await LDClient.initialize('LAUNCHDARKLY_ID', newUser);
ldclient.on("ready", () => {
    const flagResponse = ldclient.variation('flag-key-123abc', false);
    if (flagResponse != undefined && flagResponse) {
        //  Do this
    } else {
        // Do this
    }
});

上述代码中,false代表如果出现错误,应该使用的默认值。

英文:

This can be easily done as :

NPM Package :

npm install launchdarkly-js-client-sdk

Code :

import * as LDClient from &#39;launchdarkly-js-client-sdk&#39;;

const randomString = Math.random().toString(36).slice(2)
const newUser = {
    &quot;kind&quot;: &quot;user&quot;,
    &quot;key&quot;: `guest-user-${randomString}`,
    &quot;name&quot;: `guest-user-${randomString}`,
    &quot;email&quot;: `guest-user-${randomString}@email.com`
}
const ldclient = await LDClient.initialize(&#39;LAUNCHDARKLY_ID&#39;, newUser);
ldclient.on(&quot;ready&quot;, () =&gt; {
    const flagData = ldclient.allFlags();
    const flagResponse = flagData[&#39;feature_name&#39;]
    if (flagResponse != undefined &amp;&amp; flagResponse) {
        //  Do this
    }else{
        // Do this
    }

Above code is used to evaluates all the flags. If you want to evaluate a particular flag then it would be like this :

import * as LDClient from &#39;launchdarkly-js-client-sdk&#39;;

const randomString = Math.random().toString(36).slice(2)
const newUser = {
    &quot;kind&quot;: &quot;user&quot;,
    &quot;key&quot;: `guest-user-${randomString}`,
    &quot;name&quot;: `guest-user-${randomString}`,
    &quot;email&quot;: `guest-user-${randomString}@email.com`
}
const ldclient = await LDClient.initialize(&#39;LAUNCHDARKLY_ID&#39;, newUser);
ldclient.on(&quot;ready&quot;, () =&gt; {
    const flagResponse = ldclient.variation(&#39;flag-key-123abc&#39;,false);
    if (flagResponse != undefined &amp;&amp; flagResponse) {
        //  Do this
    }else{
        // Do this
    }

Above , false represents if somehow error occurred then what would be the default value one should use.

huangapple
  • 本文由 发表于 2023年5月14日 18:20:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/76246944.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定