Feature Flags

Enabling Feature flags in React using Redux

// createFeatureFlaggedContainer.js
import React from 'react';
import { connect } from 'react-redux';
import { isFeatureEnabled } from './reducers'

export default function createFeatureFlaggedContainer({
  featureName,
  enabledComponent,
  disabledComponent
  }) {
  function FeatureFlaggedContainer({ isEnabled, ...props }) {
    const Component = isEnabled ? enabledComponent : disabledComponent;

    if (Component) {
      return <Component {...props} />;
    }

    // `disabledComponent` is optional property
    return null;
  }

  // Having `displayName` is very useful for debugging.
  FeatureFlaggedContainer.displayName = `FeatureFlaggedContainer(${ featureName })`;

  return connect((store) => {
    isEnabled: isFeatureEnabled(store, featureName)
  })(FeatureFlaggedContainer);
}

// EnabledFeature.js
import { connect } from 'react-redux';
import { isFeatureEnabled } from './reducers'

function EnabledFeature({ isEnabled, children }) {
  if (isEnabled) {
    return children;
  }

  return null;
}

export default connect((store, { name }) => {
  isEnabled: isFeatureEnabled(store, name)
})(EnabledFeature);

// featureEnabled.js
import createFeatureFlaggedContainer from './createFeatureFlaggedContainer'

// Decorator for "Page" components.
// usage: enabledFeature('unicorns')(UnicornsPage);
export default function enabledFeature(featureName) {
  return (Component) => {
    return createFeatureFlaggedContainer({
      featureName,
      enabledComponent: Component,
      disabledComponent: PageNotFound, // 404 page or something similar
    });
  };
};

// features.js
// This is quite simple reducer, containing only an array of features.
// You can attach this data to a `currentUser` or similar reducer.

// `BOOTSTAP` is global action, which contains the initial data for a page
// Features access usually don't change during user usage of a page
const BOOTSTAP = 'features/receive';

export default function featuresReducer(state, { type, payload }) {
  if (type === BOOTSTAP) {
    return payload.features || [];
  }

  return state || [];
}

export function isFeatureEnabled(features, featureName) {
  return features.indexOf(featureName) !== -1;
}

// reducers.js
// This is your main reducer.js file
import { combineReducers } from 'redux';

import features, { isFeatureEnabled as isFeatureEnabledSelector } from './features';
// ...other reducers

export default combineReducers({
  features
  // ...other reducers
});

// This is the important part, access to `features` reducer should only happens
// via this selector.
// Then you can always change where/how the features are stored.
export function isFeatureEnabled({ features }, featureName) {
  return isFeatureEnabledSelector(features, featureName);
}

Related links:

• Feature flags in React
• Gist