How to get response data from ajax call in mapDispatchToProps - reactjs

Question

I'm working on a login system. When user input email and password and click submit I'm calling my endpoint to verify the credentials with mapDispatchToProps, if login is correct I update the app state with token and auth:true, otherwise I need to publish the error. How can I read the response error message (that coming from api backend json response)?
I'm looking to read the response of the dispatched usersLogin() function.
import React, { Component } from "react";
import { connect } from "react-redux";
import { usersLogin } from "../../actions/index";
import { Link } from "react-router-dom";
import i18n from "../../i18n";
function mapDispatchToProps(dispatch) {
return {
usersLogin: login => dispatch(usersLogin(login))
};
}
class ConnectedLoginForm extends Component {
constructor() {
super();
this.state = {
email: "",
password: ""
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ [event.target.id]: event.target.value });
}
handleSubmit(event) {
event.preventDefault();
const { email } = this.state;
const { password } = this.state;
this.props.usersLogin({ email, password });
this.setState({ email: email, password: password });
}
render() {
const { email } = this.state;
const { password } = this.state;
console.log("this.props");
console.log(this.props.usersLogin);
return (
<form onSubmit={this.handleSubmit} className="login-form">
<div className="form-group">
<h2>{ i18n.t("Login") }</h2>
<input
type="text"
className="input-text"
id="email"
value={email}
onChange={this.handleChange}
placeholder="Email"
autoCorrect="off" autoCapitalize="none"
/>
<input
type="text"
className="input-text"
id="password"
value={password}
onChange={this.handleChange}
placeholder="Password"
autoCorrect="off" autoCapitalize="none"
/>
<button type="submit" className="button btn-primary">
Login
</button>
<div className="other-action">
<Link to="/logout">Registrati</Link>
<Link to="/logout">Password dimenticata</Link>
</div>
</div>
</form>
);
}
}
const Loginform = connect(null, mapDispatchToProps)(ConnectedLoginForm);
export default Loginform;
Sure, this is my login function, in a redux middleware:
const reqBody = { email: action.payload.email, password: action.payload.password };
const cfg = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } };
axios.post(endpoint.users+'/login', qs.stringify(reqBody), cfg)
.then((result) => {
return dispatch({ type: "USERS_LOGIN_SUCCESS", payload : {token: result.data.token, auth: true } } );
})
.catch((err) => {
return dispatch({ type: "USERS_LOGIN_ERROR", payload : {token: '', auth: false } } );
})

Answer 1

Thank you everyone, I've changed my approach. I've installed react-toastify and I've putted the error notification in the catch block of the ajax call in the middleware.
.catch((err) => {
toast.error(i18n.t(err.response.data.errorMessage) );
return dispatch({ type: "USERS_LOGIN_ERROR", payload : { user : { token: '', auth: false } } } );
})
The solution seems to fit my need for now.