Feature Flags

Enabling Feature flags in React using Redux

  1. // createFeatureFlaggedContainer.js
  2. import React from 'react';
  3. import { connect } from 'react-redux';
  4. import { isFeatureEnabled } from './reducers'
  6. export default function createFeatureFlaggedContainer({
  7.   featureName,
  8.   enabledComponent,
  9.   disabledComponent
  10.   }) {
  11.   function FeatureFlaggedContainer({ isEnabled, ...props }) {
  12.     const Component = isEnabled ? enabledComponent : disabledComponent;
  14.     if (Component) {
  15.       return <Component {...props} />;
  16.     }
  18.     // `disabledComponent` is optional property
  19.     return null;
  20.   }
  22.   // Having `displayName` is very useful for debugging.
  23.   FeatureFlaggedContainer.displayName = `FeatureFlaggedContainer(${ featureName })`;
  25.   return connect((store) => {
  26.     isEnabled: isFeatureEnabled(store, featureName)
  27.   })(FeatureFlaggedContainer);
  28. }
  1. // EnabledFeature.js
  2. import { connect } from 'react-redux';
  3. import { isFeatureEnabled } from './reducers'
  5. function EnabledFeature({ isEnabled, children }) {
  6.   if (isEnabled) {
  7.     return children;
  8.   }
  10.   return null;
  11. }
  13. export default connect((store, { name }) => {
  14.   isEnabled: isFeatureEnabled(store, name)
  15. })(EnabledFeature);
  1. // featureEnabled.js
  2. import createFeatureFlaggedContainer from './createFeatureFlaggedContainer'
  4. // Decorator for "Page" components.
  5. // usage: enabledFeature('unicorns')(UnicornsPage);
  6. export default function enabledFeature(featureName) {
  7.   return (Component) => {
  8.     return createFeatureFlaggedContainer({
  9.       featureName,
  10.       enabledComponent: Component,
  11.       disabledComponent: PageNotFound, // 404 page or something similar
  12.     });
  13.   };
  14. };
  1. // features.js
  2. // This is quite simple reducer, containing only an array of features.
  3. // You can attach this data to a `currentUser` or similar reducer.
  5. // `BOOTSTAP` is global action, which contains the initial data for a page
  6. // Features access usually don't change during user usage of a page
  7. const BOOTSTAP = 'features/receive';
  9. export default function featuresReducer(state, { type, payload }) {
  10.   if (type === BOOTSTAP) {
  11.     return payload.features || [];
  12.   }
  14.   return state || [];
  15. }
  17. export function isFeatureEnabled(features, featureName) {
  18.   return features.indexOf(featureName) !== -1;
  19. }
  1. // reducers.js
  2. // This is your main reducer.js file
  3. import { combineReducers } from 'redux';
  5. import features, { isFeatureEnabled as isFeatureEnabledSelector } from './features';
  6. // ...other reducers
  8. export default combineReducers({
  9.   features
  10.   // ...other reducers
  11. });
  13. // This is the important part, access to `features` reducer should only happens
  14. // via this selector.
  15. // Then you can always change where/how the features are stored.
  16. export function isFeatureEnabled({ features }, featureName) {
  17.   return isFeatureEnabledSelector(features, featureName);
  18. }

Related links: