如何在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

您在Object上调用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()中的spinReels()函数(使用this.props.spinReels()(，该函数将一个操作分派给Redux。您肯定应该更改方法名称，以便清楚地知道哪一个是调度器，哪一个为对象方法。