如何捕获Redux Action中的错误并在UI中展示错误提示信息

你当前的代码存在两个致命问题，导致错误无法被捕获、提示无法渲染：

1. catch块中直接调用reject()，但该方法既没有被定义，也不存在于当前函数的执行上下文（你的函数没有返回Promise，也没有嵌套在Promise构造器回调中），这行代码本身会抛出未捕获的JS异常，错误根本无法传递到业务逻辑层
2. 接口请求失败时没有将错误状态同步到Redux Store，组件层拿不到错误状态，自然无法触发弹窗/提示组件渲染；如果你的逻辑是点击按钮先跳转至/user/academy前端路由再发请求，接口报错时新路由下没有可渲染的有效内容，就会出现空白页。

1. 修正Redux Action逻辑 #

以最常用的redux-thunk异步中间件为例，重写Action逻辑，把错误状态提交到Store：

// 定义Action类型常量
const ACADEMY_AUTOLOGIN_SUCCESS = 'ACADEMY_AUTOLOGIN_SUCCESS';
const ACADEMY_AUTOLOGIN_FAIL = 'ACADEMY_AUTOLOGIN_FAIL';
const ACADEMY_AUTOLOGIN_RESET = 'ACADEMY_AUTOLOGIN_RESET';

// 修正后的异步Action
export const getAcademyAutoLogin = () => async (dispatch) => {
  try {
    const response = await axios.get('/user/academy');
    // 接口成功返回有效跳转地址后，再执行跳转
    window.location.replace(response.data);
    dispatch({ type: ACADEMY_AUTOLOGIN_SUCCESS });
  } catch (error) {
    // 将错误信息提交到Store，不调用不存在的reject方法
    dispatch({
      type: ACADEMY_AUTOLOGIN_FAIL,
      payload: error.response ? {
        status: error.response.status,
        message: error.response.data?.message || '登录Academy模块失败'
      } : { message: '网络异常，请检查网络连接后重试' }
    });
  }
};

// 重置错误状态的Action，用于关闭弹窗时调用
export const resetAcademyLoginError = () => ({
  type: ACADEMY_AUTOLOGIN_RESET
});

2. 编写对应Reducer处理状态 #

在Store中新增Academy模块的状态管理，存储错误信息：

const initialState = {
  loginError: null
};

export const academyReducer = (state = initialState, action) => {
  switch (action.type) {
    case ACADEMY_AUTOLOGIN_FAIL:
      return { ...state, loginError: action.payload };
    case ACADEMY_AUTOLOGIN_SUCCESS:
    case ACADEMY_AUTOLOGIN_RESET:
      return { ...state, loginError: null };
    default:
      return state;
  }
};

记得把这个Reducer注册到Redux的combineReducers配置中。

3. 组件层接入状态渲染提示 #

在触发Academy跳转的页面（或者全局布局组件）中接入Store状态，按规则渲染提示：

• 点击「academy」按钮时，直接在当前页调用getAcademyAutoLogin action，不要提前跳转到/user/academy前端路由，避免无意义的路由切换导致空白
• 从Store中读取academy模块的loginError状态，当该值不为空时，渲染全局模态框/错误提示条：
  • 错误状态码为401/403时，提示「您暂无Academy模块访问权限，请联系管理员开通账号权限」
  • 错误状态码为404/500时，提示「Academy服务暂时不可用，请稍后重试」
  • 其他网络错误时，提示对应异常信息
• 给错误提示加确认/关闭按钮，点击时调用resetAcademyLoginError清空错误状态，页面会保持在原有正常视图，不会出现空白。

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