Redux-Toolkit createAsyncThunk 函数没有 return 错误

Question

我正在为 api 请求使用 Redux Toolkit 的 createAsyncThunk 函数。当关闭网络时，以下函数 returns action.payload="Network Error" 和 status = "success"。状态应该是“错误”。但是它returns成功了。有什么解决问题的建议吗？提前致谢。

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import axios from "axios";
import { GET_POSTS_API } from "./APIs";

const initialState = { posts: [], status: "idle", error: null };

export const getPosts = createAsyncThunk("posts/getPostsStatus", async () => {
  try {
    const { data } = await axios.get(GET_POSTS_API);
    return data;
  } catch (error) {
    return error.response ? error.response.data.message : error.message;
  }
});

export const postsSlice = createSlice({
  name: "posts",
  initialState,
  reducers: {},
  extraReducers: {
    [getPosts.pending]: (state, action) => {
      state.status = "loading";
    },
    [getPosts.fulfilled]: (state, action) => {
      state.status = "success";
      state.posts = action.payload;
    },
    [getPosts.rejected]: (state, action) => {
      state.status = "error";
      state.error = action.payload;
    },
  },
});

export default postsSlice.reducer;

Answer 1

当你return一个值时，你告诉createAsyncThunk这是一个成功的fulfilled请求，返回值变成action.payload.

如果您完全跳过捕获错误而只是让 axios.get() 调用抛出并拒绝承诺本身，它将正确地调度 rejected 操作。

如果您希望 thunk 的结果被考虑 rejected，但您想要自定义操作的内容，您需要使用 rejectWithValue() 实用程序，如中所示我们的文档：

https://redux-toolkit.js.org/api/createAsyncThunk#handling-thunk-errors

Redux-Toolkit createAsyncThunk 函数没有 return 错误

Redux-Toolkit createAsyncThunk function doesnt return error

reactjs

redux

redux-toolkit