Как получить данные ответа от ajax-вызова в mapDispatchToProps

Question

Я работаю в системе входа в систему. Когда пользователь вводит адрес электронной почты и пароль и нажимает кнопку «Отправить», я вызываю свою конечную точку для проверки учетных данных с помощью mapDispatchToProps. Если вход в систему правильный, я обновляю состояние приложения с помощью токена и auth: true, в противном случае мне нужно опубликовать ошибку. Как я могу прочитать ответное сообщение об ошибке (пришедшее от API-интерфейса json response)?

Я хочу прочитать ответ отправленной функции usersLogin ().

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;

Конечно, это моя функция входа в систему с промежуточным программным обеспечением:

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

Спасибо всем, я изменил свой подход.Я установил response-toastify и поместил уведомление об ошибке в блок catch для вызова ajax в промежуточном программном обеспечении.

.catch((err) => {
                toast.error(i18n.t(err.response.data.errorMessage) );
                return dispatch({ type: "USERS_LOGIN_ERROR", payload : { user : { token: '', auth: false } } } );
              })  

Решение, похоже, соответствует моим потребностям.