[英]How to reference a react component's state in a redux helper function
I'm new to redux, and I can find lots of info on how to pass a redux state to the component, but not the other way round, so I'm not sure if I'm searching the correct vocabulary.我是 redux 的新手,我可以找到很多关于如何将 redux 状态传递给组件的信息,但反过来不行,所以我不确定我是否在搜索正确的词汇。 But Essentially I want to be able to reference the current state of a react component in a redux helper function, this is what I've done - and I'm getting
TypeError: dispatch is not a function
and handleSubmit
is just launching as soon as the page is loaded:但本质上我希望能够在 redux 辅助函数中引用反应组件的当前状态,这就是我所做的 - 我得到了
TypeError: dispatch is not a function
并且handleSubmit
刚刚启动页面已加载:
App.js
render() {
return (
<div className="App">
<p>{this.state.id}</p>
<form onSubmit={this.handleSubmit(this.state.id)}>
<button type="submit">Submit</button>
</form>
</div>
)
}
const mapDispatchToProps = dispath => bindActionCreators({
handleSubmit
}, dispath);
export default connect(
mapDispatchToProps
)(App);
reducers.js
export const handleSubmit = (test) => {
window.open("http://localhost:5000/"+test);
}
//Reducer
export default (state = [], action) => {
switch (action.type) {
default:
return state;
}
};
First, you don't use the function that react-redux
pass through the props
and try to call handleSubmit
on the component itself.首先,你不使用
react-redux
通过props
的函数, handleSubmit
尝试在组件本身上调用handleSubmit
。
You are also calling the function inside onSubmit
immediately instead of passing a reference to a function so wrap it in an arrow function and use handleSubmit
from this.props
您还立即调用
onSubmit
内部的函数,而不是传递对函数的引用,因此将其包装在箭头函数中并使用handleSubmit
的this.props
onSubmit={() => this.props.handleSubmit(this.state.id)}
Second, the first argument to connect
is the mapping function to get a slice of the state called mapStateTpProps
by convention, pass in null
as the first argument.其次,
connect
的第一个参数是映射函数,用于获取按照约定称为mapStateTpProps
的状态切片,传入null
作为第一个参数。
there is also no need to use bindActionCreators
and you can just pass an object with functions and react-redux
will wrap them in dispatch
for you也没有必要使用
bindActionCreators
,你可以直接通过与功能的对象和react-redux
将包装他们dispatch
了你
export default connect(
null,
{ handleSubmit }
)(App);
You need to put id to the state of App and manage it through redux.需要将id放到App的state中,并通过redux进行管理。 Code below will help you.
下面的代码会帮助你。
// App.js
render() {
return (
<div className="App">
<p>{this.props.id}</p>
<form onSubmit={this.props.ActionSubmit(this.props.id)}>
<button type="submit">Submit</button>
</form>
</div>
)
}
const mapStateToProps = store => ({
id: store.appReducer.id,
})
const mapDispatchToProps = dispath => bindActionCreators({
ActionSubmit
}, dispath);
export default connect(
mapStateToProp,
mapDispatchToProps
)(App);
// reducers.js
export ACTION_SUBMIT = 'ACTION_SUBMIT'
export const ActionSubmit = id => ({
type: ACTION_SUBMIT,
payload: {
id,
}
})
const initialState = {
id: 0,
}
const doSubmit = (id) => {
window.open("http://localhost:5000/"+id);
}
export default AppReducer(state = initialState, action) {
switch(action.type) {
case ACTION_SUBMIT:
doSubmit( action.payload.id)
return {
id: action.payload.id,
}
default:
return state
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.