如何为同一文件内的两个函数式组件接入Redux并解决connect报错

报错根因 #

react-redux 提供的 connect 高阶组件一次仅支持包装一个组件，你同时传入FeedbackButton和HelpButton两个组件参数不符合API设计规范，因此触发报错。

无需拆分文件的实现方案 #

方案1：复用mapDispatchToProps分别包装组件 #

你可以直接在同一文件内调用两次connect分别包装两个组件，共享已经定义的mapDispatchToProps逻辑即可：

// 原有组件、mapDispatchToProps代码保持不变

// 分别导出连接后的组件
export const FeedbackButtonConnected = connect(null, mapDispatchToProps)(FeedbackButton)
export const HelpButtonConnected = connect(null, mapDispatchToProps)(HelpButton)

// 若需要默认导出，可封装为对象导出
export default {
  FeedbackButton: FeedbackButtonConnected,
  HelpButton: HelpButtonConnected
}

方案2：使用useDispatch Hook简化逻辑（更推荐函数组件使用） #

函数组件接入Redux无需依赖connect，直接使用useDispatch Hook可以更简洁的实现需求，完全省略mapDispatchToProps和connect代码：

import { useDispatch } from 'react-redux'

export function FeedbackButton() {
  const dispatch = useDispatch()
  return (
    <Button
      icon={"comment"}
      minimal={true}
      text={"Feedback?"}
      onClick={() => dispatch({ type: "TOGGLE_FEEDBACK" })}
    />
  );
}

export function HelpButton() {
  const dispatch = useDispatch()
  return (
    <Button icon={"help"} minimal={true} onClick={() => dispatch({ type: "TOGGLE_HELP" })} />
  );
}

使用这种方式两个组件可以直接导出使用，无需额外的连接逻辑。

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