mapDispatchToProps是一条路吗

Question

我正在学习React+Reux全栈教程，老师做了一些奇怪的事情，但对我不起作用。

特别是这些行，在submitForm((类中：

this.props.dispatch(registerUser(dataToSubmit))
.then(response =>{

正在导致错误：

TypeError: this.props.dispatch(...).then is not a function

这是整个类别：

import React, { Component } from 'react';
import FormField from '../utils/Form/formfield';
import { update, generateData, isFormValid } from '../utils/Form/formActions';
import { connect } from 'react-redux';
import { registerUser } from '../../actions/user_actions';
class Register extends Component {
state = {
formError: false,
formSuccess:false,
formdata:{
name: {
element: 'input',
value: '',
config:{
name: 'name_input',
type: 'text',
placeholder: 'Enter your username'
},
validation:{
required: true
},
valid: false,
touched: false,
validationMessage:''
},
email: {
element: 'input',
value: '',
config:{
name: 'email_input',
type: 'email',
placeholder: 'Enter your email'
},
validation:{
required: true,
email: true
},
valid: false,
touched: false,
validationMessage:''
},
password: {
element: 'input',
value: '',
config:{
name: 'password_input',
type: 'password',
placeholder: 'Enter your password'
},
validation:{
required: true
},
valid: false,
touched: false,
validationMessage:''
},
confirmPassword: {
element: 'input',
value: '',
config:{
name: 'confirm_password_input',
type: 'password',
placeholder: 'Confirm your password'
},
validation:{
required: true,
confirm: 'password'
},
valid: false,
touched: false,
validationMessage:''
}
}
}
updateForm = (element) => {
const newFormdata = update(element,this.state.formdata,'register');
this.setState({
formError: false,
formdata: newFormdata
})
}
submitForm= (event) =>{
event.preventDefault();
let dataToSubmit = generateData(this.state.formdata,'register');
let formIsValid = isFormValid(this.state.formdata,'register')
if(formIsValid){
this.props.dispatch(registerUser(dataToSubmit))
.then(response =>{ 
if(response.payload.success){
this.setState({
formError: false,
formSuccess: true
});
setTimeout(()=>{
this.props.history.push('/register_login');
},3000)
} else {
this.setState({formError: true})
}
}).catch(e => {
this.setState({formError: true})
})
} else {
this.setState({
formError: true
})
}
}
render() {
return (
<div className="page_wrapper">
<div className="container">
<div className="register_login_container">
<div className="left">
<form onSubmit={(event)=>  this.submitForm(event)}>
<h2>Personal information</h2>
<div className="form_block_two">
<div className="block">
<FormField
id={'name'}
formdata={this.state.formdata.name}
change={(element)=> this.updateForm(element)}
/>
</div>
</div>
<div>
<FormField
id={'email'}
formdata={this.state.formdata.email}
change={(element)=> this.updateForm(element)}
/>
</div>
<h2>Verify password</h2>
<div className="form_block_two">
<div className="block">
<FormField
id={'password'}
formdata={this.state.formdata.password}
change={(element)=> this.updateForm(element)}
/>
</div>
<div className="block">
<FormField
id={'confirmPassword'}
formdata={this.state.formdata.confirmPassword}
change={(element)=> this.updateForm(element)}
/>
</div>
</div>
<div>
{ this.state.formError ?
<div className="error_label">
Please check your data
</div>
:null}
<button onClick={(event)=> this.submitForm(event)}>
Create an account
</button>
</div>
</form>
</div>
</div>
</div>  
</div>
);
}
}
export default connect()(Register);

所以，我试着添加两者：

mapDispatchToProps = (dispatch) => {
return {
registerTheUser: (submitData) => {dispatch(registerUser(submitData)) }
}

和

export default connect(mapDispatchToProps)(Register);

然后更改：

this.props.dispatch(registerUser(dataToSubmit))
.then(response =>{

至

this.props.registerTheUser(dataToSubmit)
.then(response =>{ 

然而，这也没有奏效。

我完全不知道我需要做什么。mapDispatchToProps((甚至是我应该采取的策略来解决这个问题吗？

如果需要，我可以添加更多代码。

EDIT，操作寄存器User((：

export function registerUser(dataToSubmit){
const request = axios.post(`http://localhost:4444/users/create`,dataToSubmit)
.then(response => response.data);
return {
type: REGISTER_USER,
payload: request
}

}

Answer 1

mapDispatchToProps是要连接的第二个参数，第一个参数是mapStateToProps

要只提供mapDispatchToProps，必须像一样将第一个参数作为null传递

export default connect(null, mapDispatchToProps)(Register);

然后像一样使用

this.props.registerTheUser(dataToSubmit)
.then(response =>{ 

第一种方法也是正确的，但是您的调度操作没有返回promise，因此.then无法在其上执行

确保使用redux-thunk中间件并返回承诺

const registerUser = (data) => {
return dispatch => {
return API.register('/url', data) // a return statement here for returning promise
}
}