Redux Toolkit 的 createAsyncThunk 从不发送被拒绝的操作

Question

我正在使用 Redux Toolkit 的 createAsyncThunk 和 Axios 进行异步请求。似乎拒绝的操作从未被调度，即使我输入了一个明显错误的 URL（应该 return 404）作为端点。我知道 Whosebug 中有很多与此相关的问题，但肯定有一些我无法掌握的东西，因为我已经好几个小时没能解决这个问题了。

这是我的 Redux 切片文件：

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

const name = "listings";
const initialState = {
  data: [],
  loading: false,
  error: null
};

export const fetchListings = createAsyncThunk(
  "listings/requestStatus",
  async () => {
    const response = await axios.get(
      "lorem-ipsum-dolor-sit-amet"
      //"https://jsonplaceholder.typicode.com/todos"
    );
    return response.data;
  }
);

const slice = createSlice({
  name,
  initialState,
  extraReducers: (builder) => {
    builder.addCase(fetchListings.pending, (state) => {
      console.log("pending");
      state.data = [];
      state.loading = true;
      state.error = null;
    });
    builder.addCase(fetchListings.fulfilled, (state, action) => {
      console.log("fulfilled");
      state.data = action.payload;
      state.loading = false;
      state.error = null;
    });
    builder.addCase(fetchListings.rejected, (state, action) => {
      console.error("rejected");
      state.data = [];
      state.loading = false;
      state.error = action.error.message;
    });
  }
});

export const selectListings = (state) => ({
  data: state[name].data,
  loading: state[name].loading,
  error: state[name].error
});
export default slice.reducer;

我尝试 try/catch Axios 调用并使用 rejectWithValue 助手，但似乎没有任何改变。这是一个codesandbox to replicate the issue。 Redux 切片位于 store/listings 并导致组件 src/Listings 失败。

如果您删除 lorem-ipsum... 错误的 uri 并取消注释 jsonplaceholder 端点，您可以轻松地看到一切正常。故意使用错误的 uri 来触发 404 错误并获得已调度的拒绝操作，不幸的是，这根本没有发生。

Answer 1

我认为你的测试有问题url。

我在这里分叉：https://codesandbox.io/s/youthful-napier-6s51m

使用保证 404 响应的服务似乎都有效：https://mock.codes/404

所以，fetchListings.rejected个案例被执行了。

Redux Toolkit 的 createAsyncThunk 从不发送被拒绝的操作

Redux Toolkit's createAsyncThunk never dispatches rejected action

reactjs

redux

axios

redux-toolkit