如何将 Action(Redux) 中的错误发送到 Frontend(React)？

Question

所以我正在构建一个具有登录功能的 MERN 堆栈应用程序。每当用户发送错误的凭据时，我都会通过 res.json({errorMessage: 'sample'}) 抛出错误。但是，我还在我的应用程序中实现了 Redux，并且我有一个看起来像这样的操作。

export const loginUser =
  ({ email, password }) =>
  async (dispatch) => {
    try {
      const { data } = await axios.post("http://localhost:5000/auth/login", {
        email,
        password,
      });

      dispatch({ type: "LOGIN_USER", payload: data });
    } catch (error) {
      console.log("Err", error.response.data.errorMessage);
    }
  };

我在操作中收到错误消息，但我想在 React 中显示它。我正在尝试以这种方式访问它，但它不起作用。

const handleSubmit = (e) => {
    e.preventDefault();

    try {
      dispatch(loginUser({ email, password }));
    } catch (error) {
      console.log(error.response.data.errorMessage);
    }
  };

我在操作中遇到了错误，而不是在我的前端。如何在我的前端获取 errorMessage？提前致谢。

Answer 1

你应该在 loginUser

的 catch 中添加 throw error

export const loginUser =
  ({ email, password }) =>
  async (dispatch) => {
    try {
      const { data } = await axios.post("http://localhost:5000/auth/login", {
        email,
        password,
      });

      dispatch({ type: "LOGIN_USER", payload: data });
    } catch (error) {
      console.log("Err", error.response.data.errorMessage);
      throw error
    }
  };

并将handleSubmit更改为async

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      await dispatch(loginUser({ email, password }));
    } catch (error) {
      console.log(error.response.data.errorMessage);
    }
  };

如何将 Action(Redux) 中的错误发送到 Frontend(React)？

How to send the errors in Action(Redux) to the Frontend(React)?

node.js

reactjs

redux

redux-thunk