• 功能开关
    • 参考资料:

    功能开关

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

    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. }

    参考资料:

    • Feature flags in React
    • Gist