Как обрабатывать ошибки входа в систему через Redux в приложении React

Question

Я изучаю React-Redux и пытаюсь освоиться с ним, реализуя различные способы.У меня есть форма входа, где я хочу отобразить сообщение об ошибке, если имя пользователя / пароль неверны.Я создал конфигурационный файл с необходимыми данными пользователя.Я вызываю API аутентификации для генерации токена JWT для вошедшего в систему пользователя. Итак, токен, который вы получите в ответ на API аутентификации, будет содержать данные о пользователе, вошедшие в систему.Я сделал что-то похожее ниже, но вижу, что могу каждый раз успешно входить в систему и не могу отображать сообщения об ошибках, когда пытаюсь указать произвольное / неправильное имя пользователя.Я закомментировал функцию componentetWillreceiveProps, но хотел бы понять, что я делаю неправильно.

Мой журнал Comp-

import React from "react";
import Header from "./header";
import Footer from "./footer";
import { connect } from "react-redux";
import { createLogIn, setAuthError } from "../actions/action";

const axios = require("axios");
import jwtdata from "../config/jwtdata";

class Login extends React.Component {
  constructor() {
    super();
    this.state = {
      account: { user: "", password: "" }
    };
  }

  handleAccountChange = ({ target: input }) => {
    const account = { ...this.state.account };
    account[input.name] = input.value;
    this.setState({ account });
  };

  handleLoginForm = e => {
    e.preventDefault();
    let postLoginData = {};
    const userName = this.state.account.user;

    // call to action
    this.props.dispatch(createLogIn(postLoginData, userName));
    this.props.dispatch(setAuthError())

    this.props.history.push("/intro");
  };

  // componentWillReceiveProps(nextProps) {
  //   if (nextProps.authStatus){
  //     this.props.history.push("/intro");
  //   }
  // }
  render() {
    const { account } = this.state;
    return (
      <div className="intro">
        <Header />
        <form onSubmit={this.handleLoginForm}>
          <div className="content container">
            <div className="profile" />
            <div className="row">
              <div className="col-xs-12">
                <input
                  type="text"
                  autoFocus
                  placeholder="username"
                  name="user"
                  value={account.user}
                  onChange={this.handleAccountChange}
                />
                <input
                  type="password"
                  placeholder="password"
                  name="password"
                  value={account.password}
                  onChange={this.handleAccountChange}
                />
                <button
                  className={
                    "loginButton " +
                    (account.user && account.password
                      ? "not-disabled"
                      : "disabled")
                  }
                  disabled={!account.user && !account.password ? true : false}
                >
                  <span>Sign in</span>
                </button>
              </div>
              {!this.props.authStatus ? (
                <p className="login-error">
                  Authorization Failed. Please try again!
                </p>
              ) : (
                <p />
              )}
            </div>
          </div>
        </form>
        <Footer />
      </div>
    );
  }
}

const mapStateToProps = state => ({
  authStatus: state.root.authStatus
});

export default connect(mapStateToProps)(Login);

Создатель действий -

export const createLogIn = (postLoginData, userName)  => (dispatch) => {

  console.log('>>> ', userName);

  console.log('authenticating');  
  console.log(btoa(JSON.stringify(jwtdata)));

  localStorage.setItem("UserData", btoa(JSON.stringify(jwtdata[userName])))
    // dispatch({
    //   type: SET_AUTH_ERROR,
    //   payload: false
    // })
    axios({
        method: "POST",
        url: "/authenticateUrl",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        data: postLoginData
      })
        .then (response => {
          dispatch({
            type: API_LOG_IN, 
            payload: response.data
          })
          localStorage.setItem('AccessToken', response.data.jwt_token);
        })
        .catch( error => {
          console.log("in catch block");
        });
}

export const setAuthError = ()  => {
    console.log('inside actions');
    return {
        type: SET_AUTH_ERROR, 
        payload: "Authorization Error"
    }
} 

Reducer-

const initialState = {
    authStatus: true
}
const reducerFunc = (state = initialState, action)  => {
    switch (action.type) {
        case API_LOG_IN:
        console.log('reducers');
        return {...state, logIn: action.payload}

        case SET_AUTH_ERROR:
        console.log('inside Auth reduccer');
        return {...state,authStatus: action.payload}
        default: return {...state}
    }
}

export default reducerFunc;

Я пытаюсь добавить проверку внутри componentWillReceiveProps, но, похоже, это не работает. Вместо этого всегда отображается сообщение об ошибке, даже если имя пользователя совпадает с именем файла конфигурации.Что мне нужно, чтобы вывести какое-то сообщение типа «Авторизация не удалась», если я попытаюсь нажать кнопку входа с неверными учетными данными пользователя.

Answer 1

!this.props.authStatus ? (

Похоже, проблема в этой строке.Так как ваш authStatus либо «неопределен», когда не было ошибок, либо «Аутентификация не удалась».