Блог

Я использую функцию createAsyncThunk инструментария Redux для запроса api. При выключении сети следующая функция возвращает действие.полезная нагрузка=»Ошибка сети» и статус = «успешно». Статус должен быть «ошибка». Но это возвращает успех. Есть какие-нибудь предложения по устранению проблемы ? Заранее спасибо.

 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;
 

Когда вы return вводите значение, вы сообщаете createAsyncThunk , что это успешный fulfilled запрос, и возвращаемое значение становится action.payload .

Если вы полностью пропустите перехват ошибок и просто позволите axios.get() вызову выполнить и отклонить само обещание, оно правильно отправит rejected действие.

Если вы хотите , чтобы результат выполнения был учтен rejected , но вы хотите настроить содержимое действия, вам необходимо использовать rejectWithValue() util, как показано в наших документах:

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