如何将 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中添加抛出错误

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);
    }
  };