如何将redux添加到同一个文件中的两个功能组件？

Question

我正在尝试将redux 添加到位于同一文件中的两个功能组件，即按钮。代码如下：

export function FeedbackButton(props) {
  return (
    <Button
      icon={"comment"}
      minimal={true}
      text={"Feedback?"}
      onClick={() => props.toggleFeedback()}
    />
  );
}

export function HelpButton(props) {
  return (
    <Button icon={"help"} minimal={true} onClick={() => props.toggleHelp()} />
  );
}

const mapDispatchToProps = (dispatch) => {
  return {
    toggleFeedback: () => dispatch({ type: "TOGGLE_FEEDBACK" }),
    toggleHelp: () => dispatch({ type: "TOGGLE_HELP" }),
  };
};

export default connect(null, mapDispatchToProps)(FeedbackButton, HelpButton);

我在尝试connect 这两个组件时遇到错误。有没有一种模式可以让我在不使用单独文件的情况下将两个组件添加到 state 中？

Answer 1

更新一下

export default connect(null, mapDispatchToProps)(FeedbackButton, HelpButton);

到：

export const FeedbackButtonConnected = connect(null, mapDispatchToProps)(FeedbackButton)
export const HelpButtonConnected = connect(null, mapDispatchToProps)(HelpButton)

并像这样使用它：

import { FeedbackButtonConnected,  HelpButtonConnected } from "path-to-file"