не могу получить набор инструментов redux для работы с async (createAsyncThunk)

Question

Привет, друзья stackOverflow. Я начинаю использовать набор инструментов redux, но кое-что не понимаю.

У меня есть этот срез:

      const envSlice = createSlice({
  name: "env",
  initialState: { envs: [], loading: false, error: false },
  reducers: {},
  extraReducers: {
    [fetchEnv.pending]: (state) => {
      state.loading = true;
    },
    [fetchEnv.fulfilled]: (state, action) => {
      state.envs = action.payload;
      state.loading = false;
    },
    [fetchEnv.rejected]: (state) => {
      state.loading = false;
      state.error = true;
    },
  },
});

export default envSlice.reducer; 

И я пытаюсь получить данные с сервера mongo. этот код работал в обычном сокращении:

      --- fetching all the envs ---

export const fetchEnv = createAsyncThunk("admin/fetchEnv", (thunkAPI) => {
  axios
    .get("http://10.0.0.6:5000/admin/getAllEnv")
    .then((response) => response.data)
    .catch((error) => {
      console.log(error);
      return thunkAPI.RejectWithValue(error);
    });
});

Но почему-то всегда попадает в ловушку и отвергает - даже если это ответ.

этот код работает:

      export const fetchEnv = createAsyncThunk(
  "admin/fetchEnv",
  async (_, thunkAPI) => {
    try {
      const response = await axios.get("http://10.0.0.6:5000/admin/getAllEnv");
      return response.data;
    } catch (error) {
      return thunkAPI.rejectWithValue({ error: error.message });
    }
  }
);

Моя проблема в том, что я выполнил эту работу, но я не могу понять, почему первый createAsyncThunk не работает и почему второй работает.

Для меня обе функции выглядят одинаково.

Это пример из документации RTK (по какой-то причине они не охватывают обработку ошибок в этом примере, я не нашел ни одной):

Благодарность (: .

Answer 1

Из документации :

и функция обратного вызова, которая должна возвращать обещание

Ваш асинхронный преобразователь, который не работает, ничего не возвращает:

      export const fetchEnv = createAsyncThunk("admin/fetchEnv", (thunkAPI) => {
  return axios //<----return a promise
    .get("http://10.0.0.6:5000/admin/getAllEnv")
    .then((response) => response.data)
    .catch((error) => {
      console.log(error);
      return thunkAPI.RejectWithValue(error);
    });
});

Или у вас может быть функция стрелки без тела:

      export const fetchEnv = createAsyncThunk(
  'admin/fetchEnv',
  (
    thunkAPI 
  ) => //no { or }
    axios
      .get('http://10.0.0.6:5000/admin/getAllEnv')
      .then((response) => response.data)
      .catch((error) => {
        console.log(error);
        return thunkAPI.RejectWithValue(error);
      })
);