Redux Toolkit中Extra Reducer无法捕获Axios异步请求错误

你的问题出在createAsyncThunk的错误处理逻辑上：

当你在thunk的catch块里return错误信息时，Redux Toolkit会判定这个异步操作已成功完成（状态为fulfilled），而非失败。因此extraReducers里的rejected分支永远不会触发，反而会走到fulfilled分支处理你返回的错误字符串。

修复步骤 #

1. 修改异步Thunk的错误处理 #

将getTravelItems里的错误返回改为抛出错误：

export const getTravelItems = createAsyncThunk("items/fetchItems", async () => {
  try {
    const responseItems = await axios.get(`${baseURL}/items.js`);
    return responseItems.data;
  } catch (_err) {
    const error = _err as AxiosError;
    // 把return改为throw，让Thunk进入rejected状态
    throw error.message;
    // 也可以直接抛出完整错误对象，方便获取更多错误细节
    // throw error;
  }
});

2. 修正Reducer的rejected分支参数 #

确保rejected分支正确读取错误信息：

.addCase(getTravelItems.rejected, (state, action) => {
  console.log(action.error);
  console.log("error! ");
  state.reqStatus = "failed";
  state.error = action.error.message;
})

逻辑说明 #

createAsyncThunk的核心规则是：

• 异步函数正常return值 → 触发fulfilled分支
• 异步函数抛出错误 → 触发rejected分支

你之前的写法把错误当作“成功返回的数据”，导致RTK标记操作成功，自然不会进入rejected分支。修正后，错误会被正确抛出，触发对应的错误处理逻辑，你的组件就能正常显示failed状态下的错误信息了。

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