功能开关

使用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);
}

参考资料:

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

results matching ""

    No results matching ""