如何将Redux Action中的错误信息传递到React前端展示

问题原因 #

1. 你的loginUser thunk内部已经通过catch捕获了所有错误且没有向外抛出，因此组件侧的try-catch无法接收到错误。
2. 你调用dispatch(loginUser())时没有添加await，即使thunk向外抛出错误，同步的try-catch也无法捕获异步操作抛出的错误。

方案1：通过Redux状态管理错误（推荐） #

该方案符合Redux的数据流设计，错误会被统一存储在全局状态中，适合多组件共享错误状态的场景。

步骤1：修改Action代码，派发错误事件 #

export const loginUser =
  ({ email, password }) =>
  async (dispatch) => {
    try {
      const { data } = await axios.post("http://localhost:5000/auth/login", {
        email,
        password,
      });
      // 登录成功时清除历史错误
      dispatch({ type: "LOGIN_USER_ERROR", payload: null });
      dispatch({ type: "LOGIN_USER", payload: data });
    } catch (error) {
      const errMsg = error.response?.data?.errorMessage || '登录失败，请稍后重试';
      // 将错误信息派发到store
      dispatch({ type: "LOGIN_USER_ERROR", payload: errMsg });
    }
  };

步骤2：修改Reducer，存储错误信息 #

const initialState = {
  userInfo: null,
  loginError: null // 新增存储登录错误的字段
}

const authReducer = (state = initialState, action) => {
  switch(action.type) {
    case "LOGIN_USER":
      return { ...state, userInfo: action.payload };
    case "LOGIN_USER_ERROR":
      return { ...state, loginError: action.payload };
    default:
      return state;
  }
}

步骤3：组件中读取错误信息展示 #

import { useSelector } from 'react-redux';

const Login = () => {
  // 从全局状态中读取登录错误
  const loginError = useSelector(state => state.auth.loginError);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(loginUser({ email, password }));
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 错误信息展示 */}
      {loginError && <p style={{ color: 'red' }}>{loginError}</p>}
      {/* 表单其他代码省略 */}
      <button type="submit">登录</button>
    </form>
  )
}

方案2：组件侧直接捕获错误 #

适合不需要全局存储错误，仅在当前登录组件使用错误信息的场景。

步骤1：修改Action代码，向外抛出错误 #

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) {
      const errMsg = error.response?.data?.errorMessage || '登录失败，请稍后重试';
      console.log("Err", errMsg);
      // 将错误向外抛出，供组件侧捕获
      throw new Error(errMsg);
    }
  };

步骤2：修改组件提交逻辑，添加异步处理 #

const Login = () => {
  const [loginError, setLoginError] = useState(null);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoginError(null); // 提交前清除历史错误
    try {
      // 加await等待异步操作完成
      await dispatch(loginUser({ email, password }));
    } catch (error) {
      // 捕获错误存储到组件state中
      setLoginError(error.message);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 错误信息展示 */}
      {loginError && <p style={{ color: 'red' }}>{loginError}</p>}
      {/* 表单其他代码省略 */}
      <button type="submit">登录</button>
    </form>
  )
}

内容的提问来源于stack exchange，提问作者XypriL