Как вызвать метод класса React в redux connect mapDispatchToProps - PullRequest
Новая
       13

Как вызвать метод класса React в redux connect mapDispatchToProps

0 голосов
/ 03 марта 2020

Я использую избыточность, я хочу вызвать функцию перед отправкой какого-либо действия на преобразователь .
И еще одна вещь - я не хочу выводить методы класса за пределы класса .

Я пробовал гуглить, везде они просто отправляют действие.
Я думаю, что я могу упустить какое-то базовое c понимание. Может кто-нибудь из вас подскажет, как поступить?

Ниже мой код: 

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);

1 Ответ

1 голос
/ 03 марта 2020

Вы вызываете 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()). Затем вы вызываете функцию spinReels() в вашем mapDispatchToProps() (с this.props.spinReels()), которая отправляет действие в Redux. Вам определенно следует изменить имена методов, чтобы было ясно, какой из них является диспетчером, а какой - методом объекта.

...