Redux Toolkit createAsyncThunk 网络错误时返回success状态如何修复

createAsyncThunk 触发rejected状态的前提是回调函数抛出未捕获的异常。你当前的代码在catch块中直接return了错误信息，属于回调正常返回值，因此会走fulfilled逻辑，错误信息被当作成功的payload处理，自然不会进入错误状态。

方案一：直接抛出错误 #

catch到错误后直接抛出，触发createAsyncThunk的默认错误逻辑：

export const getPosts = createAsyncThunk("posts/getPostsStatus", async () => {
  try {
    const { data } = await axios.get(GET_POSTS_API);
    return data;
  } catch (error) {
    // 替换原来的return为throw，抛出错误触发rejected状态
    throw error.response ? error.response.data.message : error.message;
  }
});

需同步修改rejected回调的取值逻辑，抛出的默认错误会挂载在action.error上：

[getPosts.rejected]: (state, action) => {
  state.status = "error";
  state.error = action.error.message;
}

方案二：使用rejectWithValue返回自定义错误（推荐） #

使用createAsyncThunk内置的rejectWithValue工具，可以自定义错误payload，无需修改原有reducer逻辑：

// 回调第二个参数为thunkAPI对象，解构获取rejectWithValue方法
export const getPosts = createAsyncThunk("posts/getPostsStatus", async (_, { rejectWithValue }) => {
  try {
    const { data } = await axios.get(GET_POSTS_API);
    return data;
  } catch (error) {
    const errMsg = error.response ? error.response.data.message : error.message;
    // 返回rejectWithValue会自动触发rejected状态，错误信息挂载在action.payload
    return rejectWithValue(errMsg);
  }
});

该方案适配你原有rejected回调的写法，无需额外修改。

内容的提问来源于stack exchange，提问作者hakan-dev