単一の機能を取得する

import { useFeature } from 'ibm-appconfiguration-react-client-sdk';

const feature = useFeature('featureId'); // returns undefined incase the featureId is invalid or doesn't exist

if (feature !== undefined) {
  console.log(`Feature Name ${feature.getFeatureName()} `);
  console.log(`Feature Id ${feature.getFeatureId()} `);
  console.log(`Feature Type ${feature.getFeatureDataType()} `);
  console.log(`Is feature enabled? ${feature.isEnabled()} `);
}

すべての機能を取得する

import { useFeatures } from 'ibm-appconfiguration-react-client-sdk';

const features = useFeatures();
const feature = features['featureId'];

if (feature !== undefined) {
  console.log(`Feature Name ${feature.getFeatureName()} `);
  console.log(`Feature Id ${feature.getFeatureId()} `);
  console.log(`Feature Type ${feature.getFeatureDataType()} `);
  console.log(`Is feature enabled? ${feature.isEnabled()} `);
}

フィーチャーの評価

feature.getCurrentValue(entityId, entityAttributes) メソッドを使用して、機能フラグの値を評価できます。 このメソッドは、評価に基づいて、有効/無効/オーバーライドされた値のいずれかを返します。 戻り値のデータ・タイプは、フィーチャー・フラグのデータ・タイプと一致します。 機能フラグの評価を実行するためのパラメーターとして、固有の entityId を渡します。

const entityId = 'john_doe';
const entityAttributes = {
  city: 'Bangalore',
  country: 'India',
};

const feature = useFeature('featureId');
const featureValue = feature.getCurrentValue(entityId, entityAttributes);

ここで、

• entityId: エンティティーの ID。 これは、フィーチャーが評価されるエンティティーに関連するストリング ID になります。 例えば、エンティティはモバイルデバイス上で実行されるアプリのインスタンスかもしれないし、ウェブアプリケーションにアクセスするユーザーかもしれない。 いずれかのエンティティーが App Configuration と対話するには、固有のエンティティー ID を提供する必要があります。
• entityAttributes: 指定されたエンティティーを定義する属性名とその値で構成される JSON オブジェクト。 フィーチャー・フラグがターゲット定義で構成されていない場合、これはオプション・パラメーターです。 ターゲットが構成されている場合は、ルール評価のために entityAttributes を指定する必要があります。 属性は、セグメントを定義するために使用されるパラメーターです。 SDK は、属性値を使用して、指定されたエンティティーがターゲット・ルールを満たしているかどうかを判別し、適切なフィーチャー・フラグ値を返します。

カスタムメトリクスの送信

実験では「useTrack フックを使用してカスタムメトリクスを記録します。

import { useTrack } from 'ibm-appconfiguration-react-client-sdk';

export default MyComponent = function () {
    const trackEvent = useTrack();
    return (
        <button onClick={() => trackEvent('clicked', 'user123')}>Buy</button>
    )
}

単一のプロパティーを取得する

import { useProperty } from 'ibm-appconfiguration-react-client-sdk';

const property = useProperty('propertyId'); // returns undefined incase the propertyId is invalid or doesn't exist

if (property !== undefined) {
  console.log(`Property Name ${property.getPropertyName()} `);
  console.log(`Property Id ${property.getPropertyId()} `);
  console.log(`Property Type ${property.getPropertyDataType()} `);
}

すべてのプロパティーを取得する

import { useProperties } from 'ibm-appconfiguration-react-client-sdk';

const properties = useProperties();
const property = properties['propertyId'];

if (property !== undefined) {
  console.log(`Property Name ${property.getPropertyName()} `);
  console.log(`Property Id ${property.getPropertyId()} `);
  console.log(`Property Type ${property.getPropertyDataType()} `);
}

プロパティーの評価

不動産の価値を評価するには、 property.getCurrentValue(entityId, entityAttributes) メソッドを使用する。 このメソッドは、評価に基づいて、デフォルトのプロパティー値またはオーバーライドされた値を返します。 戻り値のデータ・タイプは、プロパティーのデータ・タイプと一致します。

const entityId = 'john_doe';
const entityAttributes = {
  city: 'Bangalore',
  country: 'India',
};

const property = useProperty('propertyId');
const propertyValue = property.getCurrentValue(entityId, entityAttributes);

ここで、

• entityId: エンティティーの ID。 これは、プロパティーの評価対象となるエンティティーに関連するストリング ID になります。 いずれかのエンティティーが App Configuration と対話するには、固有のエンティティー ID を提供する必要があります。
• entityAttributes: 指定されたエンティティーを定義する属性名とその値で構成される JSON オブジェクト。 ターゲット定義でプロパティーが構成されていない場合、これはオプション・パラメーターです。 ターゲットが構成されている場合は、ルール評価のために entityAttributes を指定する必要があります。 属性は、セグメントを定義するために使用されるパラメーターです。 SDK は、属性値を使用して、指定されたエンティティーがターゲティング・ルールを満たしているかどうかを判別し、適切なプロパティー値を返します。

React Client SDKでフォールバック値を使用する

App Configurationで接続エラーが発生した場合、SDKはメモリに保持されている直近に評価されたフラグ値に依存する。 しかし、メモリ上に事前値が存在しない場合は、ユーザーがコード内でフォールバック値を確立し、スムーズな動作を保証することが望ましい。 このフォールバックアプローチを示す例を以下に示します。

import { useFeatures } from 'ibm-appconfiguration-react-client-sdk';

export default function App {
  const features = useFeatures();
  const defaultFlagValues = {
    'flight-booking': false
  }
  const entityId = 'john_doe';
  const entityAttributes = {
    city: 'Bangalore',
    country: 'India',
  };

  const getAppConfigurationFlags = (featureID, features) => {
    if (Object.keys(features).length === 0 && features.constructor === Object) {
      return defaultFlagValues[featureID];
    }

    return feature[featureID]
      ? feature[featureID].getCurrentValue(entityId, entityAttributes)
      : defaultFlagValues[featureID];
  };

  return getAppConfigurationFlags('flight-booking', features) ? <div>Flight Booking</div> : '';
}