Redux SDK

npm install --save @splitsoftware/splitio-redux

yarn add @splitsoftware/splitio-redux

import { configureStore, combineReducers } from '@reduxjs/toolkit';
import { splitReducer, initSplitSdk } from '@splitsoftware/splitio-redux';

const sdkBrowserConfig = {
  core: {
    authorizationKey: 'YOUR_SDK_KEY',
    // key represents your internal user id, or the account id that 
    // the user belongs to. 
    // This could also be a cookie you generate for anonymous users.
    key: 'key'
  }
};

// Create the Redux Store
const store = configureStore(
  combineReducers({
    splitio: splitReducer,
    ... // Combine Split reducer with your own reducers
  }),
  // Split SDK requires thunk middleware, which is included by default by Redux Toolkit
);

// Initialize the SDK by calling the initSplitSdk and passing the config in the parameters object.
store.dispatch(initSplitSdk({ config: sdkBrowserConfig }));

export default store;

import { createStore, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk'; // Requirement for asynchronous actions
import { splitReducer, initSplitSdk } from '@splitsoftware/splitio-redux';

const sdkBrowserConfig = {
  core: {
    authorizationKey: 'YOUR_SDK_KEY',
    // key represents your internal user id, or the account id that 
    // the user belongs to. 
    // This could also be a cookie you generate for anonymous users.
    key: 'key'
  }
};

// Create the Redux Store
const store = createStore(
  combineReducers({
    splitio: splitReducer,
    ... // Combine Split reducer with your own reducers
  }),
  // Add thunk middleware, used by Split SDK async actions
  applyMiddleware(thunk)
);

// Initialize the SDK by calling the initSplitSdk and passing the config in the parameters object.
store.dispatch(initSplitSdk({ config: sdkBrowserConfig }));

export default store;

import { createStore, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk'; // Requirement for asynchronous actions
import { splitReducer, initSplitSdk } from '@splitsoftware/splitio-redux';

const sdkNodeConfig = {
  core: {
    authorizationKey: 'YOUR_SDK_KEY'
  }
};
/**
 * initSplitSdk should be called only once, to keep a single Split factory instance.
 * The returned action is dispatched each time a new store is created, to update 
 * the Split status at the state. 
 */
const initSplitSdkAction = initSplitSdk({ config: sdkNodeConfig });

const reducers = combineReducers({
  splitio: splitReducer,
  ... // Combine Split reducer with your own reducers
});

export default function storeCreator() {
  // Pass the reducers combined, including the splitReducer to each new store you create.
  const store = createStore(reducers, applyMiddleware(thunk));
  // Dispatch the initSplitSdk returned action the new store instance.
  store.dispatch(initSplitSdkAction);

  return store;
}

{
  // 'splitio' is the key where the Split reducer is expected to be mounted.
  'splitio': {
    // The following properties indicate the current status of the SDK main client (the one bound to the key provided in the config).
    'isReady': true, // boolean flag indicating if the SDK is ready
    'isReadyFromCache': false, // boolean flag indicating if the SDK is ready from cache
    'isTimedout': false, // boolean indicating if the SDK is in a timed out state. Note: it will get ready eventually unless it's misconfigured
    'hasTimedout': false, // boolean indicating if the SDK has ever been in a timed out state
    'isDestroyed': false, // boolean indicating if the SDK has been destroyed. Read more in the shutdown section
    'lastUpdate': 56789592012, // timestamp of the last SDK state change (either timed out, got ready, destroyed or processed an update from the cloud)

    /** 
     * The 'treatments' property contains the evaluations of feature flags.
     * Each evaluation consist of TreatmentResult objects associated to the key used on the evaluation and the feature flag name.
     * We recommend that you use the provided selector functions for ease of consumption.
     */
    'treatments': { 
      'feature_flag_name_1': {
        'key': {
          'treatment': 'on',
          'config': "{'copy': 'better copy', 'color': 'red'}"
        }
      },
      'feature_flag_2': {
        'key': {
          'treatment': 'off',
          'config': null
        }
      }
    },
    /**
     * The 'status' property contains the status of the non-default clients, i.e., the ones that are not bound to the key provided in the config.
     */
    'status': {
      'key': {
        'isReady': true, 'isReadyFromCache': false, 'isTimedout': false, 'hasTimedout': false, 'isDestroyed': false, 'lastUpdate': 56789592012
      }
    }
  }
}

import { initSplitSdk } from '@splitsoftware/splitio-redux';

function onReadyCallback() {
  // Use the SDK now that it is ready to properly evaluate.
}

// Along with the config, you can provide a callback to be executed once the SDK is ready, to handle accordingly.
store.dispatch(initSplitSdk({ 
  config: sdkConfig,
  onReady: onReadyCallback
}));

// You should have already initialized the SDK.
let isSplitReady = false;

const handleChange = () => {
  const isReadyFlag = store.getState().splitio.isReady;

  if (isReadyFlag) {
    // Keep in mind that the store subscription will be triggered any time an action is dispatched, 
    // and some part of the state tree may potentially have changed.
    isSplitReady = true;

    // Use the SDK now that it is ready to properly evaluate.
  }
}

// Note: If you're using react-redux you could do this via mapStateToProps. Read more below!
store.subscribe(handleChange);

import { initSplitSdk } from '@splitsoftware/splitio-redux';

function onReadyCallback() {
  // Use the SDK now that it is ready to properly evaluate.
}

// initSplitSdk action creator would return a promise. If the SDK is ready already the promise will be resolved by this time.
store.dispatch(initSplitSdk({ config: sdkConfig })).then(onReadyCallback);

import { initSplitSdk, selectStatus } from '@splitsoftware/splitio-redux';

// initSplitSdk action creator would return a promise. If the SDK is ready already the promise will be resolved by this time.
store.dispatch(initSplitSdk({ config: sdkConfig }));

// Use the selector to get the isReady flag from the state.
const { isReady } = selectStatus(store.getState().splitio);

import { getTreatments } from '@splitsoftware/splitio-redux';

// Dispatch action to evaluate and load treatments for a feature flag. The key used is the one passed in the config.
store.dispatch(getTreatments({ splitNames: ['feature_flag_1'] }));
// Or a list of feature flags.
store.dispatch(getTreatments({ splitNames: ['feature_flag_2', 'feature_flag_3'] }));

import { getTreatments } from '@splitsoftware/splitio-redux';

// Dispatch action to evaluate and load treatments for a feature flag. In Node.js we need to provide the key on each getTreatments.
store.dispatch(getTreatments({ splitNames: ['feature_flag_1'], key: 'key' }));
// Or a list of feature flags.
store.dispatch(getTreatments({ splitNames: ['feature_flag_2', 'feature_flag_3'], key: 'key' }));

// Import treatment value selector.
import { selectTreatmentAndStatus } from '@splitsoftware/splitio-redux');

// Get the treatment corresponding to the key bound to the main client for feature_flag_1 feature flag.
const { treatment, isReady } = selectTreatmentAndStatus(store.getState().splitio, 'feature_flag_1');

if (isReady) {
  if (treatment === 'on') {
    // insert on code here
  } else if (treatment === 'off') {
    // insert off code here
  } else {
    // insert control code here
  }
}

// Alternatively you could access the treatments directly from the store or your own custom selectors.
const splitTreatments = store.getState().splitio.treatments;
const treatment = splitTreatments['key']['feature_flag_1'].treatment;

// Import treatment value selector.
import { selectTreatmentAndStatus } from '@splitsoftware/splitio-redux');

// Get the treatment corresponding to the key of value 'key' for feature_flag_1 feature flag.
const { treatment } = selectTreatmentAndStatus(store.getState().splitio, 'feature_flag_1', 'key');

if (treatment === 'on') {
  // insert on code here
} else if (treatment === 'off') {
  // insert off code here
} else {
  // insert control code here
}

// Alternatively you can access the treatments directly from the store or your own custom selectors.
const splitTreatments = store.getState().splitio.treatments;
const treatment = splitTreatments['key']['feature_flag_1'].treatment;

import { selectTreatmentAndStatus, getTreatments } from '@splitsoftware/splitio-redux');

const attributes = {
  // date attributes are handled as `millis since epoch`
  registered_date: new Date('YYYY-MM-DDTHH:mm:ss.sssZ').getTime(),
  // this string will be compared against a list called `plan_type`
  plan_type: 'growth',
  // this number will be compared agains a const value called `deal_size`
  deal_size: 10000,
  // this boolean will be compared against a const value called `paying_customer`
  paying_customer: true,
  // this array will be compared against a set called `permissions`
  permissions: ["read", "write"]
};

// You can pass the attributes with any getTretments action using the `attributes` key of the parameters.
store.dispatch(getTreatments({ splitNames: ['feature_flag_1'], attributes: attributes }));

const { treatment } = selectTreatmentAndStatus(store.getState().splitio, 'feature_flag_1');

if (treatment === 'on') {
  // insert on code here
} else if (treatment === 'off') {
  // insert off code here
} else {
  // insert control code here
}

import { selectTreatmentAndStatus, getTreatments } from '@splitsoftware/splitio-redux');

const attributes = {
  // date attributes are handled as `millis since epoch`
  registered_date: new Date('YYYY-MM-DDTHH:mm:ss.sssZ').getTime(),
  // this string will be compared against a list called `plan_type`
  plan_type: 'growth',
  // this number will be compared agains a const value called `deal_size`
  deal_size: 10000,
  // this boolean will be compared against a const value called `paying_customer`
  paying_customer: true,
  // this array will be compared against a set called `permissions`
  permissions: ["read", "write"]
};

// You can pass the attributes with any getTretments action using the `attributes` key of the parameters.
store.dispatch(getTreatments({ splitNames: ['feature_flag_1'], key: 'key', attributes: attributes }));

const { treatment } = selectTreatmentAndStatus(store.getState().splitio, 'feature_flag_1', 'key');

if (treatment === 'on') {
  // insert on code here
} else if (treatment === 'off') {
  // insert off code here
} else {
  // insert control code here
}

store.dispatch(getTreatments({ splitNames: ['FEATURE_FLAG_NAME_1', 'FEATURE_FLAG_NAME_2'] }));

store.dispatch(getTreatments({ flagSets: ['frontend', 'client_side'] }));

// Getting treatments from the store
const treatments = {
  FEATURE_FLAG_NAME_1: selectTreatmentAndStatus(store.getState().splitio, 'FEATURE_FLAG_NAME_1').treatment,
  FEATURE_FLAG_NAME_2: selectTreatmentAndStatus(store.getState().splitio, 'FEATURE_FLAG_NAME_2').treatment
};

type TreatmentWithConfig = {
  treatment: string,
  config: string | null
};

// Import treatment with config selector.
import { selectTreatmentWithConfigAndStatus } from '@splitsoftware/splitio-redux');

// Get the TreatmentResult corresponding to the key bound to the client (which value is 'key' on this snippet) for 'feature_flag_1' feature flag.
const treatmentResult = selectTreatmentWithConfigAndStatus(store.getState().splitio, 'feature_flag_1').treatment;
const config = JSON.parse(treatmentResult.config);
const treatment = treatmentResult.treatment;

if (treatment === 'on') {
  // insert on code here and use configs here as necessary
} else if (treatment === 'off') {
  // insert off code here and use configs here as necessary
} else {
  // insert control code here
}


// Alternatively you could access the TreatmentResults directly from the store or your own custom selectors.
const splitTreatments = store.getState().splitio.treatments;
const treatmentResult = splitTreatments['key']['feature_flag_1'];

// Import treatment with config selector.
import { selectTreatmentWithConfigAndStatus } from '@splitsoftware/splitio-redux');

// Get the TreatmentResult corresponding to the key of value 'key' for 'feature_flag_1' feature flag.
const treatmentResult = selectTreatmentWithConfigAndStatus(store.getState().splitio, 'feature_flag_1', 'key').treatment;
const config = JSON.parse(treatmentResult.config);
const treatment = treatmentResult.treatment;

if (treatment === 'on') {
  // insert on code here and use configs here as necessary
} else if (treatment === 'off') {
  // insert off code here and use configs here as necessary
} else {
  // insert control code here
}


// Alternatively you could access the TreatmentResults directly from the store or your own custom selectors.
const splitTreatments = store.getState().splitio.treatments;
const treatmentResult = splitTreatments['key']['feature_flag_1'];

import { destroySplitSdk } from '@splitsoftware/splitio-redux';

// you can dispatch the action to update the status at the store
store.dispatch(destroySplitSdk());

// the dispatched Thunk action returns a promise available as the return value of dispatch itself.
// this promise always resolves once the SDK has been shutdown
store.dispatch(destroySplitSdk()).then(() => {
  console.log(store.getState().splitio.isDestroyed); // prints `true`
});

import { destroySplitSdk } from '@splitsoftware/splitio-redux';

function serverClose() {
  // on scenarios where you need to destroy the SDK without dispatching the action, such as on server-side,
  // you can attach a callback that is invoked once the SDK has been shutdown
  destroySplitSdk({
    onDestroy: function() {
      console.log("Split destroyed");
    }
  });

});

import { track } from '@splitsoftware/splitio-redux';

const eventProperties = {package : "premium", admin : true, discount : 50};

// On the client side, SDK clients are bound to a key. If you don't provide a key, the SDK will use the key provided in the config. You can provide a different key to the track method if you want to track an event for a different key, like an account ID for example.
function track: (
  params: { key?: SplitIO.SplitKey, trafficType: string, eventType: string, value?: number, properties?: SplitIO.Properties }
) => boolean;

// Example with both a value and properties
const queued = track({ trafficType: 'user', eventType: 'page_load_time', value: 83.334, properties: eventProperties });
// Example with only properties 
const queued = track({ trafficType: 'user', eventType: 'page_load_time', properties: eventProperties });
// Most basic event you can track would require trafficType and eventType (just skip the value or properties params if you don't have any associated with your event)
const queued = track({ trafficType: 'user', eventType: 'page_load_time' });

// Example for a different key than the one provided in the SDK config
const queued = track({ key: ACCOUNT_ID, trafficType: 'account', eventType: 'page_load_time' });

import { track } from '@splitsoftware/splitio-redux';

const eventProperties = {package : "premium", admin : true, discount : 50};

// On the server side the client is not bound to any key, so you need to provide these on the track call.
function track: (
  params: { key: SplitIO.SplitKey, trafficType: string, eventType: string, value?: number, properties?: SplitIO.Properties }
) => boolean;

// Example with both a value and properties
const queued = track({ key: USER_ID, trafficType: 'user', eventType: 'page_load_time', value: 83.334, properties: eventProperties });
// Example with only properties 
const queued = track({ key: USER_ID, trafficType: 'user', eventType: 'page_load_time', properties: eventProperties });
// Most basic event you can track would require key, trafficType and eventType (just skip the value or properties params if you don't have any associated with your event)
const queued = track({ key: USER_ID, trafficType: 'user', eventType: 'page_load_time' });

const config = {
  core: {
    authorizationKey: 'localhost',
    key: 'user_id'
  },
  features: {
    'reporting_v2': 'on', // example with just a string value for the treatment
    'billing_updates': { treatment: 'visa', config: '{ "color": "blue" }' }, // example of a defined config
    'show_status_bar': { treatment: 'off', config: null } // example of a null config
  }
};

store.dispatch(initSplitSdk({ config: sdkConfig }));

import { getSplitNames, getSplit, getSplits } from '@splitsoftware/splitio-redux'

/** 
 * Returns the names of feature flags registered with the SDK.
 *
 * @return a List of Strings of the feature flag names.
 */
const splitNamesList: SplitIO.SplitNames = getSplitNames();

/**
 * Returns the feature flag registered with the SDK of this name.
 *
 * @return SplitView or null.
 */
const splitView: SplitIO.SplitView = getSplit(splitName: string);

/**
 * Retrieves the feature flags that are currently registered with the SDK.
 *
 * @return List of SplitViews.
 */
const splitViewsList: SplitIO.SplitViews = getSplits();

/**
 * where each SplitView object has the following shape
 */
type SplitView = {
  name: string,
  trafficType: string,
  killed: boolean,
  treatments: Array<string>,
  changeNumber: number,
  configs: {
    [treatmentName: string]: string
  },
  defaultTreatment: string,
  sets: Array<string>
}

import { getSplitNames, initSplitSdk, getTreatments } from '@splitsoftware/splitio-redux';

// You need to initialize the SDK and wait for readiness to properly use the manager methods.
store.dispatch(initSplitSdk({ config: sdkBrowserConfig, onReady: onReadyCallback }));

function onReadyCallback() {
  const myFeatureFlags = getSplitNames();

  store.dispatch(getTreatments({ splitNames: myFeatureFlags }));
}

import { getSplitNames, initSplitSdk, getTreatments } from '@splitsoftware/splitio-redux';

// You need to initialize the SDK and wait for readiness to properly use the manager methods.
const initSplitSdkAction = initSplitSdk({ config: sdkNodeConfig, onReady: onReadyCallback });
let myFeatureNames = [];

function onReadyCallback() {
  myFeatureNames = getSplitNames();
}

// Remember that the actions should be dispatched per request, so the results are loaded to the store that you'll return for the requesting user/entity.
// The SDK should be ready by this point so it can evaluate immediately.
function requestHandler(params) {
  store.dispatch(initSplitSdkAction); // Loads Split general data into the store.
  store.dispatch(getTreatments({ key: params.key, splitNames: myFeatureNames })); // Load the treatments and configs into the store.
}

import { initSplitSdk } from '@splitsoftware/splitio-redux';

function logImpression(impressionData) {
  // do something with the impression data.
}

// Create the config for the SDK factory.
const sdkBrowserConfig = { 
  core: {
    authorizationKey: 'YOUR_SDK_KEY',
    key: 'key'
  },
  impressionListener: {
    logImpression: logImpression
  }
});

store.dispatch(initSplitSdk({ config: sdkBrowserConfig }));

import { initSplitSdk } from '@splitsoftware/splitio-redux';

function logImpression(impressionData) {
  // do something with the impression data.
}

// Create the config for the SDK factory.
const sdkNodeConfig = { 
  core: {
    authorizationKey: 'YOUR_SDK_KEY'
  },
  impressionListener: {
    logImpression: logImpression
  }
});

store.dispatch(initSplitSdk({ config: sdkNodeConfig }));

import { initSplitSdk, getTreatments, track, selectTreatmentAndStatus, selectTreatmentWithConfigAndStatus } from '@splitsoftware/splitio-redux';

const sdkBrowserConfig = {
  core: {
    authorizationKey: 'YOUR_SDK_KEY',
    key: 'CUSTOMER_ACCOUNT_ID', // This is the key that will be bound to the client.
  }
};

store.dispatch(initSplitSdk({ config: sdkBrowserConfig, onReady: onReadyCallback }));

// Regular track for bound account client (where key would be CUSTOMER_ACCOUNT_ID)
const queuedAccountEvent = track({ trafficType: 'account', eventType: 'ACCOUNT_CREATED' });
// Tracking events with a key parameter on the client side will get a new client (or reuse it if already created) and track events for the given key
const queuedUserEvent = track({ key: 'CUSTOMER_USER_ID', trafficType: 'user', eventType: 'PAGELOAD', value: 7.86 }); 

function onReadyCallback() {
  // Dispatch action to evaluate and load treatments for a feature flag (where key would be CUSTOMER_ACCOUNT_ID)
  store.dispatch(getTreatments({ splitNames: ['feature_flag_1'] }));
  // Providing a different key will get a new client (or reuse it if already created) and calculate treatments for this key too.
  store.dispatch(getTreatments({ splitNames: ['feature_flag_2'], key: 'CUSTOMER_USER_ID' }));

  // To access the values for the different clients, you can use our selectors.
  // If you're using multiple keys, you should provide the key when retrieving the data with the selectors, otherwise we'll default to the first entry found.
  const accountTreatment = selectTreatmentAndStatus(store.getState().splitio, 'feature_flag_1', 'CUSTOMER_ACCOUNT_ID').treatment;
  const userTreatment = selectTreatmentAndStatus(store.getState().splitio, 'feature_flag_2', 'CUSTOMER_USER_ID').treatment;

  const accountTreatmentAndConfig = selectTreatmentWithConfigAndStatus(store.getState().splitio, 'feature_flag_1', 'CUSTOMER_ACCOUNT_ID').treatment;
  const userTreatmentAndConfig = selectTreatmentWithConfigAndStatus(store.getState().splitio, 'feature_flag_2', 'CUSTOMER_USER_ID').treatment;
}

import { initSplitSdk } from '@splitsoftware/splitio-redux';

function onReadyCallback() {
  // Use the SDK now that it is ready to properly evaluate.
}

function onReadyFromCacheCallback() {
  // Use the SDK to evaluate using data from the local storage cache.
}

function onTimedoutCallback() {
  // Optionally handle timeout. SDK might be ready at a later point unless there's a problem on the setup.
}

function onUpdateCallback() {
  // Optionally handle SDK update event. SDK was ready and processed an update on either your feature flags or segments
  // that might change the result of an evaluation.
}

// Provide the callbacks if you're using the config.
store.dispatch(initSplitSdk({ 
  config: sdkConfig,
  onReady: onReadyCallback,
  onReadyFromCache: onReadyFromCacheCallback,
  onTimedout: onTimedoutCallback,
  onUpdate: onUpdateCallback;
}));

import { selectStatus, selectTreatmentAndStatus } from '@splitsoftware/splitio-redux';

// Retrieves current status of the SDK client with USER_ID key. If no key is provided, the main client status is returned.
const { isReady, isReadyFromCache, isTimedout, hasTimedout, isDestroyed, lastUpdate } = selectStatus(store.getState().splitio, USER_ID);

// Readiness properties are also available in the selector result.
const { isReady, isReadyFromCache, isTimedout, hasTimedout, isDestroyed, lastUpdate, treatment } = selectTreatmentAndStatus(store.getState().splitio, 'feature_flag_1', USER_ID);

// Accessing the status of the main client from the splitio slice of state
const { isReady, isReadyFromCache, hasTimedout, isDestroyed } = store.getState().splitio;

  // The results for feature_flag_1 and feature_flag_2 will be re-evaluated whenever an update is processed,
  // and updated in the Redux store if they changed.
  // If you wanted to stop reacting to updates, dispatch the action again with the desired key,
  // feature flag names an evalOnUpdate as false (to override the behavior).
  store.dispatch(getTreatments({ splitNames: ['feature_flag_1', 'feature_flag_2'], evalOnUpdate: true }));

  // The results for feature_flag_1 and feature_flag_2 will be evaluated when the Sdk is ready or an update is processed.
  // However only feature_flag_1 will be evaluated also if the Sdk is ready from cache.
  store.dispatch(initSplitSdk({ config: sdkBrowserConfig, onReadyFromCache: onReadyFromCacheCallback, onReady: onReadyCallback }));
  store.dispatch(getTreatments({ splitNames: ['feature_flag_1'], evalOnUpdate: true, evalOnReadyFromCache: true }));
  store.dispatch(getTreatments({ splitNames: ['feature_flag_2'], evalOnUpdate: true }));

  function onReadyFromCacheCallback() {
    // feature_flag_1 is different than 'control' since we instructed the SDK to evaluate once cache is loaded.
    const feature_flag_1 = selectTreatmentAndStatus(store.getState().splitio, 'feature_flag_1').treatment;
    // feature_flag_2 is 'control' still as it wasn't evaluated with cached data.
    const feature_flag_2 = selectTreatmentAndStatus(store.getState().splitio, 'feature_flag_2').treatment;
    ...
  }

  function onReadyCallback() {
    // both feature flags treatments should be different than 'control' given that any pending evaluation is calculated once SDK is ready
    const feature_flag_1 = selectTreatmentAndStatus(store.getState().splitio, 'feature_flag_1').treatment;
    const feature_flag_2 = selectTreatmentAndStatus(store.getState().splitio, 'feature_flag_2').treatment;
    ...
  }

import { connectSplit, selectTreatmentAndStatus, getSplitNames } from '@splitsoftware/splitio-redux';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    props.getTreatments({ splitNames: ['myFeatureFlag'] }));
  };

  render() {
    const { splitio } = props;

    const isMyFeatureFlagOn = selectTreatmentAndStatus(splitio, 'myFeatureFlag').treatment === 'on';

    if (isMyFeatureFlagOn) {
      return (<MyFeatureFlagOnComponent />);
    } else {
      return (<MyFeatureFlagDefaultComponent />);
    }
  }
}

export default connectSplit()(MyComponent);

// If you've mounted the Redux SDK reducer in a key of the state other than `splitio`, you need to provide
// a callback for retrieving the feature flag related slice of state. 
// If not provided, it will default to using `state.splitio`.
export default connectSplit((state) => {
  return state['my_key_for_split_reducer'];
})(MyComponent);

import { connectToggler } from '@splitsoftware/splitio-redux';

const ComponentOn = () => {
  return (...);
}

const ComponentDefault = () => {
  return (...);
}

// This component renders ComponentOn if 'myFeatureFlag' evaluation yielded 'on', otherwise it renders ComponentDefault
const FeatureFlagToggler = connectToggler('myFeatureFlag')(ComponentOn, ComponentDefault);

// If you need to evaluate for a different key than the one bound to the factory config, 
// you can pass it as the second param of the decorator.
const key = 'key';
const FeatureFlagTogglerForOtherKey = connectToggler('myFeatureFlag', key)(ComponentOn, ComponentDefault);

// If you've mounted the Redux SDK reducer in a key of the state other than `splitio`, you need to provide
// a callback for retrieving the feature flag related slice of state as the 3rd parameter. 
// If not provided, it will default to using `state.splitio`.
const FeatureFlagTogglerFromCustomStateKey = connectToggler('myFeatureFlag', key, (state) => {
  return state['my_key_for_split_reducer'];
})(ComponentOn, ComponentDefault);

import { splitSdk, initSplitSdk, ... } from '@splitsoftware/splitio-redux';

// `splitSdk.factory` is null until `initSplitSdk` action creator is called
store.dispatch(initSplitSdk({ config: sdkBrowserConfig }));

splitSdk.factory.UserConsent.getStatus();

import { splitSdk, initSplitSdk, ... } from '@splitsoftware/splitio-redux';

// `splitSdk.factory` is null until `initSplitSdk` action creator is called
store.dispatch(initSplitSdk({ config: sdkBrowserConfig }));

(splitSdk.factory as SplitIO.IBrowserSDK).UserConsent.getStatus();