如何在 redux connect mapDispatchToProps 中调用 React 类方法

Question

我正在使用 redux，我想要的是在向 reducer 分派任何操作之前调用一个函数。
还有一件事是我不想在课堂之外使用类方法。

我试过谷歌搜索，到处都是他们只是发送一个动作。
我想我可能会错过一些基本的理解，你们中的任何人都可以建议如何进行吗？

下面是我的代码：

class UltimateConsoleFunctionality extends React.Component {
  constructor(props) {
    super(props);
  }

  spinReels = function() {
    gsap.from(".Reels-row-symbols", 0.15, {
      y: "-=500",
      repeat: 10,
      ease: Linear.easeNone,
      onComplete: this.stopReels
    });
  };

  stopReels = function() {
    gsap.set(".Reels-row-symbols", { x: 0, y: 0 });
  };

  render() {
    switch (this.props.type) {
      case "spinStop":
        if (this.props.spin && !this.props.stop) {
          return (
            <div className="Ultimate-console-functionality">
              <img
                alt="spinButton"
                src={spinButton}
                onClick={this.props.spinReels}
                className="spinStop"
              />
            </div>
          );
        } else if (!this.props.spin && this.props.stop) {
          return (
            <div className="Ultimate-console-functionality">
              <img
                alt="stopButton"
                src={stopButton}
                onClick={this.props.stopReels}
                className="spinStop"
              />
            </div>
          );
        } else if (!this.props.spin && !this.props.stop) {
          return (
            <div className="Ultimate-console-functionality">QuickSpinMode</div>
          );
        }

        break;
      case "quickSpin":
        return (
          <div className="Ultimate-console-functionality">
            {this.props.quickSpin ? (
              <img
                alt="quickSpin"
                src={quickSpinSelected}
                onClick={this.props.quickSpinMethod}
                className="spinStop"
              />
            ) : (
              <img
                alt="stopButton"
                src={quickSpin}
                onClick={this.props.quickSpinMethod}
                className="spinStop"
              />
            )}
          </div>
        );
        break;
      default:
        return <div className="Ultimate-console-functionality">OTHERS</div>;
    }
  }
}

const mapStateToProps = state => {
  return {
    spin: state.spin,
    stop: state.stop,
    quickSpin: state.quickSpin
  };
};

const mapDispatchToProps = dispatch => {
  return {
    spinReels: () => {
      // How to call my class below method here
      UltimateConsoleFunctionality.spinReels();
      dispatch({ type: "SPIN" });
    },
    stopReels: () => {
      // How to call my class below method here
      UltimateConsoleFunctionality.stopReels();
      dispatch({ type: "STOP" });
    },
    quickSpinMethod: () => {
      dispatch({ type: "QUICKSPIN" });
    }
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(UltimateConsoleFunctionality);

Answer 1

您在对象上调用UltimateConsoleFunctionality.spinReels()，而不是实例。这就是为什么它不适用于您的情况。

您可以更改您的 onClick 属性，使其在该实例中调用 spinReels() 函数：

<img
    alt="spinButton"
    src={spinButton}
    onClick={() => {
        this.spinReels()
        this.props.spinReels()
    }} 
    className="spinStop"
/>

在这种情况下，您需要将mapDispatchToProps()'spinReels() 绑定更改为：

spinReels: () => {
    dispatch({ type: "SPIN" });
}

不过，您的方法名称确实令人困惑，我建议您更改它们。现在，在您的onClick 中，您首先调用对象的spinReels() 实现（使用this.spinReels()）。然后，您在mapDispatchToProps()（使用this.props.spinReels()）中调用spinReels() 函数，该函数将动作分派给Redux。您绝对应该更改方法名称，以便清楚哪个是调度程序，哪个是对象方法。