reactjs - 如何在 redux connect mapDispatchToProps 中调用 React 类方法
问题描述
我正在使用 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);
解决方案
您正在调用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()
(with this.spinReels()
) 实现。然后,您在(with ) 中调用该spinReels()
函数,该函数将一个动作分派给 Redux。您绝对应该更改方法名称,以便清楚哪个是调度程序,哪个是对象方法。mapDispatchToProps()
this.props.spinReels()
推荐阅读
- python - ModuleNotFoundError:没有名为“couchbase.cluster”的模块;'couchbase' 不是一个包
- c++ - 我正在尝试从源代码为 conda 安装 cudf,我无法使用 cmake 安装它
- java - Springboot [2.1.6.RELEASE] - 禁用自动更正输入日期
- python - 自定义模型方法上的 Django order_by
- python - 我正在尝试在熊猫的数据框中切片一列
- c# - 程序集加载问题(“无法加载类型”)
- mysql - AWS RDS 对远程请求的响应时间很长
- javascript - ESLint 可以帮助你防止 Unhandled-Promise-Rejections 吗?
- python - macOS 终端不在正确的目录中创建文件
- java - Netty 4.1.51.Final 出现 Http File Upload 的 bug