Javascript 分派非常简单的重复操作
下午好 我有一个非常艰难的一天,试图让这个非常简单的redux操作正常工作。我想做的就是将我的状态更改为当前正在查看的选项卡-就是这样!没什么特别的。我将向您展示组件、动作创建者和减速器:Javascript 分派非常简单的重复操作,javascript,reactjs,redux,Javascript,Reactjs,Redux,下午好 我有一个非常艰难的一天,试图让这个非常简单的redux操作正常工作。我想做的就是将我的状态更改为当前正在查看的选项卡-就是这样!没什么特别的。我将向您展示组件、动作创建者和减速器: StudentDash.js: import React from "react"; import {connect} from "react-redux"; import { chooseTab } from "../../actions/dashActions"; const StudentDash
StudentDash.js
:
import React from "react";
import {connect} from "react-redux";
import { chooseTab } from "../../actions/dashActions";
const StudentDash = React.createClass({
handleTabChange(button){
chooseTab(button);
},
render(){
return(
<div className="dashContainer">
<div className="nav">
<div id="userInfo">
Hello {this.props.user.username}
</div>
<div id="navButtons">
<button onClick={() => this.handleTabChange("profile")}>Profile</button>
<button onClick={() => this.handleTabChange("caleander")}>Caleander</button>
<button onClick={() => this.handleTabChange("ballots")}>Ballot Entry</button>
</div>
</div>
<div className="navFocus"></div>
</div>
)
}
});
const mapStateToProps = (state) => {
return{
user: state.user,
activeTab: state.activeTab
}
};
const mapDispatchToProps = {
chooseTab
};
export default connect(mapStateToProps, mapDispatchToProps)(StudentDash);
export function chooseTab(tab){
console.log(tab.toUpperCase());
return {
type: tab.toUpperCase()
}
}
dashReducer.js
export function activeTab(state={}, action){
switch(action.type){
case "PROFILE":
console.log("profile");
return state;
case "CALEANDER":
console.log("CALEANDER");
return state;
case "BALLOTS":
console.log("BALLOTS");
return state;
default:
return state;
}
};
我已经试着将
类型
编码到action.type
监听器之一,例如“选票”。在此之前,我已经使用redux成功地实现了异步操作。我要疯了,试图让这个非常简单的标签选择动作正常工作,需要一个新的眼睛-因为我不知道为什么我的减速机没有拿起这个 我假设您当前在控制台中有一个错误,它说chooseTab不是一个函数
当您
将组件连接到redux并使用函数mapDispatchToProps
时,您将返回的函数作为道具提供给组件。这意味着,当您想要分派该操作时,您需要向其发出laThis.props.chooseTab(按钮)
你们在哪里注册减速器?对我来说,看起来你注册和发送都很正常。他们注册在一个联合减速器中@yowakita帮了我一把。是的,就是这样。我没有错误来提示我,但是这个.props.chooseTab(tab)
就是这样做的。谢谢你结束了我生命中疯狂的一小时。没问题,很高兴我能帮上忙@m00sacachooseTab
已定义,但connect
也充当存储调度
(在redux
中)和动作创建者之间的绑定。你打电话给你的动作创建者,但它什么也没做,只是返回动作。没有connect
的等价物是store.dispatch(chooseTab(tab))
。