功能开关

优质

小牛编辑

123浏览

2023-12-01

使用Redux在React中实现Feature标记符

// 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);
}

功能开关

参考资料: