Redux Thunk Action未按预期触发rejected，反而被标记为fulfilled

你的Redux Thunk action被标记为fulfilled而非预期的rejected，核心原因是thunk函数没有正确返回一个被拒绝的Promise。

具体问题分析 #

在createAsyncThunk创建的异步action中，如果代码捕获了错误但没有重新抛出，或者没有让错误传递出去，函数会默认返回一个状态为resolved的Promise（即使内部发生了错误），导致Redux将该action判定为fulfilled。

比如你的代码可能类似这样：

export const fetchData = createAsyncThunk(
  'test/fetchData',
  async () => {
    try {
      const response = await fetch('无效接口地址');
      if (!response.ok) throw new Error('请求失败');
      return response.json();
    } catch (error) {
      // 仅打印错误，未传递错误信息
      console.log(error);
    }
  }
);

这里的catch块只打印了错误，但没有将错误重新抛出，函数执行到最后会默认返回undefined，对应一个resolved的Promise，因此Redux认为action已完成。

解决方法 #

只需要在捕获错误后重新抛出，或者返回一个被拒绝的Promise，让createAsyncThunk识别到错误状态：

方案1：重新抛出错误

export const fetchData = createAsyncThunk(
  'test/fetchData',
  async () => {
    try {
      const response = await fetch('无效接口地址');
      if (!response.ok) throw new Error('请求失败');
      return response.json();
    } catch (error) {
      // 重新抛出错误，触发rejected状态
      throw error;
    }
  }
);

方案2：移除try/catch，让错误自然抛出

如果不需要额外的错误处理逻辑，直接去掉try/catch，让错误自然传递：

export const fetchData = createAsyncThunk(
  'test/fetchData',
  async () => {
    const response = await fetch('无效接口地址');
    if (!response.ok) throw new Error('请求失败');
    return response.json();
  }
);

方案3：返回Promise.reject()

也可以在catch块中返回一个被拒绝的Promise：

export const fetchData = createAsyncThunk(
  'test/fetchData',
  async () => {
    try {
      const response = await fetch('无效接口地址');
      if (!response.ok) throw new Error('请求失败');
      return response.json();
    } catch (error) {
      return Promise.reject(error);
    }
  }
);

以上任意一种方式，都能让Redux正确识别到action的rejected状态。

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