Перейти к основному содержимому

Client SDK

Client SDK построен на базе JavaScript и предоставляет React-специфичный API.

Возможности​

  • Нативные React-хуки для работы с экспериментами и фича-флагами
  • Автоматическое кеширование результатов

Установка​

npm install expf-sigma.js

Создание хука для работы с SDK​

Создайте хук, который инициализирует SDK и предоставляет доступ к результатам экспериментов и фича-флагам:

/src/hooks/useSigma.js

import Sigma from 'expf-sigma.js';
import { useEffect, useState } from 'react';

const token = <TOKEN>;
const FALLBACK_VALUES = {
  browserName: '#',
  buttonColor: 'red',
  allExps: null
};

async function initSigma({ userId }) {
  const sigma = new Sigma();
  sigma.init({ 
    token: TOKEN, 
    userData: { 
      userId 
    } 
  });

  const browserName = await sigma.checkFlag('browser_name') ?? FALLBACK_VALUES.browserName;
  const buttonColor = await sigma.getExperiment('exp_id').then(res => res.getParamValue('button_color')) ?? FALLBACK_VALUES.buttonColor;
  const allExps = await sigma.getAllUserExperiments() ?? FALLBACK_VALUES.allExps;

  return { browserName, buttonColor, allExps };
}

const sigmaData = initSigma({ userId: 1 });

export function useSigma() {
  const [data, setData] = useState(FALLBACK_VALUES);

  useEffect(() => {
    sigmaData.then(setData);
  }, []);

  return data;
}

Использование в компонентах​

Подключите хук в любом компоненте для получения значений:

/src/components/Title.js

import { useSigma } from '../hooks/useSigma';

export default function Title() {
  const { browserName } = useSigma();

  return (
    <h1>{browserName}</h1>
  );
}

Лучшие практики​

  1. Выносите инициализацию в отдельный хук или контекст
  2. Всегда определяйте fallback-значения
  3. Для SSR — оборачивайте клиентский код в useEffect или используйте dynamic import