如何复用已连接Redux的类组件以分发不同Action？

给你几个扩展性更好的方案，核心思路是把组件本身和具体的Redux分发动作解耦，让组件只负责UI渲染和内部状态逻辑，不绑定特定的Redux动作：

1. 拆分纯组件与Redux连接逻辑 #

把原组件改造成不直接依赖特定Redux动作的纯组件，通过props接收通用的更新函数，然后针对不同的动作需求，单独创建对应的Redux连接组件：

改造原纯组件 #

class MyComponent extends Component {
  // 内部状态、UI渲染逻辑完全保留
  handleUpdate = (id) => {
    // 调用props传入的通用更新函数，不再硬编码动作名称
    this.props.updateCount(id);
  }

  render() {
    // ...原UI渲染代码
  }
}

创建不同功能的连接组件 #

// 下载计数组件：绑定updateDownloadCount动作
const mapDownloadDispatch = (dispatch) => ({
  updateCount: (id) => dispatch(updateDownloadCount(id))
});
export const DownloadComponent = connect(null, mapDownloadDispatch)(MyComponent);

// 上传计数组件：绑定updateUploadCount动作
const mapUploadDispatch = (dispatch) => ({
  updateCount: (id) => dispatch(updateUploadCount(id))
});
export const UploadComponent = connect(null, mapUploadDispatch)(MyComponent);

之后需要新增其他计数动作（比如updateShareCount）时，只需要新建对应的连接组件即可，完全不用修改原MyComponent的代码。

2. 用高阶组件（HOC）封装连接逻辑 #

如果需要频繁创建不同动作的组件，可以封装一个通用的高阶组件，传入对应的动作创建函数，自动生成连接后的组件：

定义通用高阶组件 #

const withCountUpdater = (actionCreator) => {
  return (TargetComponent) => {
    const mapDispatchToProps = (dispatch) => ({
      updateCount: (id) => dispatch(actionCreator(id))
    });
    return connect(null, mapDispatchToProps)(TargetComponent);
  };
};

生成不同功能的组件 #

// 生成下载计数组件
export const DownloadComponent = withCountUpdater(updateDownloadCount)(MyComponent);

// 生成上传计数组件
export const UploadComponent = withCountUpdater(updateUploadCount)(MyComponent);

这种方式进一步简化了重复代码，新增动作时只需要一行代码生成对应的组件，扩展性极强。

这两种方案都避免了在组件内部通过参数判断分发哪个动作的问题，让组件职责更单一，也方便后续维护和扩展。

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