Is mapDispatchToProps the way to go? - node.js

Question

I am following a tutorial for a React+Redux fullstack and the instructor did something strange that is not working for me.
Specifically these lines, in the submitForm() class:
this.props.dispatch(registerUser(dataToSubmit))
.then(response =>{
Are causing error:
TypeError: this.props.dispatch(...).then is not a function
This is the whole class:
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);
So, I tried to add both:
mapDispatchToProps = (dispatch) => {
return {
registerTheUser: (submitData) => {dispatch(registerUser(submitData)) }
}
and
export default connect(mapDispatchToProps)(Register);
then changed:
this.props.dispatch(registerUser(dataToSubmit))
.then(response =>{
to
this.props.registerTheUser(dataToSubmit)
.then(response =>{
However, that also didn't work.
I am at a complete loss as to what it is I need to do. Is mapDispatchToProps() even the strategy I should be taking to fix this?
I can add more code if necessary.
EDIT, action registerUser():
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 is the second argument to connect, the first argument is mapStateToProps
To supply just mapDispatchToProps, you must pass the first argument as null like
export default connect(null, mapDispatchToProps)(Register);
then use it like
this.props.registerTheUser(dataToSubmit)
.then(response =>{
Also the first way is correct, however your dispatch action isn't returning a promise and hence .then cannot be executed on it.
Make sure you use redux-thunk middleware and return a promise
const registerUser = (data) => {
return dispatch => {
return API.register('/url', data) // a return statement here for returning promise
}
}