Blog>
Snippets

Defining Feature Flags in Redux Initial State

Showcase a Redux initial state setup that includes feature flags for toggling specific application features, ensuring flags are easily accessible across the application state.
const initialState = {
  featureFlags: {
    isNewUserExperienceEnabled: false,
    isDarkModeFeatureActive: true,
    isBetaFeatureXAvailable: false
  }
  // ...other state properties
};

// Redux action to update feature flags
const updateFeatureFlag = (flagName, value) => ({
  type: 'UPDATE_FEATURE_FLAG',
  payload: { flagName, value }
});

// Redux reducer to handle feature flags
function featureFlagReducer(state = initialState.featureFlags, action) {
  switch (action.type) {
    case 'UPDATE_FEATURE_FLAG':
      const { flagName, value } = action.payload;
      return {
        ...state,
        [flagName]: value
      };
    default:
      return state;
  }
}
Defines an initial Redux state with a property `featureFlags` that holds the feature flags' values. It includes a Redux action `updateFeatureFlag` to update the state of individual feature flags, and a `featureFlagReducer` to handle actions related to feature flags. This setup allows toggling features within the application.