React Redux：改造单请求HOC为支持多API请求的可复用组件求助

首先说下你现有单请求HOC的合理性：它的核心思路是对的——把组件挂载时的API调用、加载/错误状态管理、卸载清理这些重复逻辑抽离成HOC，确实能减少业务组件的冗余代码。不过局限也很明显，只能支持单请求，当组件需要同时发起多个API请求时，要么重复套HOC，要么只能在组件内部写额外逻辑，复用性就大打折扣了。接下来我给你一套完整的改造方案，把它变成支持多请求的通用HOC。

改造核心思路 #

我们要把原来的单个请求配置改成数组结构，同时处理多个请求的加载、错误和重试逻辑：

• 允许传入多个挂载请求动作、对应的加载ID、卸载清理动作
• 批量执行挂载请求，统一判断是否有任意请求在加载中
• 提供重试单个请求或所有请求的能力
• 移除冗余的本地stateLoader，完全依赖Redux的全局加载状态（原方案里本地状态和Redux状态混用，有点没必要）

改造后的代码实现 #

1. 多请求HOC核心代码 #

export const ComponentWithMultiAPIRequests = ({ 
  onMount = [], 
  loaderRequestIds = [], 
  onUnmount = [] 
}) => (WrappedComponent) => {
  return class ComponentWithMultiAPIRequests extends Component {
    componentDidMount() {
      this.runAllMountRequests();
    }

    componentWillUnmount() {
      this.runAllUnmountActions();
    }

    // 批量执行所有挂载时的API请求
    runAllMountRequests = () => {
      onMount.forEach((actionName, index) => {
        if (this.props[actionName]) {
          // 给每个请求传入对应的LoaderID
          const targetLoaderId = loaderRequestIds[index];
          this.props[actionName](targetLoaderId);
        }
      });
    }

    // 批量执行所有卸载时的清理动作
    runAllUnmountActions = () => {
      onUnmount.forEach(actionName => {
        this.props[actionName]?.();
      });
    }

    // 重试单个指定请求
    retrySingleRequest = (requestIndex) => {
      const actionName = onMount[requestIndex];
      const loaderId = loaderRequestIds[requestIndex];
      if (this.props[actionName]) {
        this.props[actionName](loaderId);
      }
    }

    // 重试所有请求
    retryAllRequests = () => {
      this.runAllMountRequests();
    }

    render() {
      const { isLoadingRequestIds, errors } = this.props;
      
      // 判断是否有任意一个请求处于加载状态
      const hasActiveLoading = loaderRequestIds.some(loaderId => 
        isLoadingRequestIds.includes(loaderId)
      );

      if (hasActiveLoading) {
        return (
          <div className="text-center">
            <CircularProgress />
          </div>
        );
      }

      // 把重试方法、每个请求的错误传递给子组件
      return (
        <WrappedComponent 
          {...this.props} 
          retryAll={this.retryAllRequests}
          retrySingle={this.retrySingleRequest}
          requestErrors={loaderRequestIds.map(id => errors[id])}
        />
      );
    }
  };
};

2. 业务组件使用示例 #

export const isContainer = ({ initial, list }) => (WrappedComponent) => {
  const IsContainer = (props) => <WrappedComponent {...props} />;
  return compose(
    ComponentWithMultiAPIRequests(initial),
    hasRequestError
  )(IsContainer);
};

@isContainer({
  initial: {
    onMount: ['FirstRequest', 'SecondRequest'], // 要执行的多个API请求动作
    loaderRequestIds: ['FirstRequestLoader', 'SecondRequestLoader'], // 对应每个请求的加载ID
    onUnmount: ['ResetLeaderBoardAll', 'ResetSecondRequestState'] // 卸载时要执行的多个清理动作
  }
})
class ComponentView extends Component {
  render() {
    const { retryAll, retrySingle, requestErrors } = this.props;
    return (
      <div>
        {/* 单个请求错误时显示重试按钮 */}
        {requestErrors[0] && (
          <button onClick={() => retrySingle(0)}>重试第一个请求</button>
        )}
        {requestErrors[1] && (
          <button onClick={() => retrySingle(1)}>重试第二个请求</button>
        )}
        {/* 重试所有请求按钮 */}
        <button onClick={retryAll}>重试所有请求</button>
        
        <SomeComponent {...this.props}/>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    somestate: state.somestate,
    isLoadingRequestIds: state.loading.requestIds, // 假设Redux中存储所有加载中的请求ID数组
    errors: state.errors // 假设Redux中以加载ID为key存储每个请求的错误信息
  };
};

export default connect(mapStateToProps, { 
  FirstRequest, 
  SecondRequest,
  ResetLeaderBoardAll,
  ResetSecondRequestState
})(ComponentView);

额外优化建议 #

• 请求顺序控制：如果你的多个请求有依赖关系（比如第二个请求需要第一个请求的返回值），可以给HOC加一个requestOrder配置，或者允许传入异步函数来控制请求执行顺序
• 类型约束：如果用TypeScript，给HOC的配置参数和props加上类型定义，能避免很多参数传递错误
• 细化加载状态：如果需要分别显示每个请求的加载状态，可以把单个请求的加载状态传递给子组件，而不是只显示全局加载
• 错误边界：在HOC中加入错误边界，捕获子组件的渲染错误，提升页面稳定性

内容的提问来源于stack exchange，提问作者tapan dave