Redux Toolkit 的 createAsyncThunk 从不调度被拒绝的操作

Question

我使用Redux Toolkit的createAsyncThunk和Axios进行异步请求。似乎拒绝的动作永远不会被发送，即使我输入了一个明显错误的URL(应该返回一个404)作为端点。我知道在StackOverflow中有很多与此相关的问题，但肯定有一些我无法理解的东西，因为我已经几个小时没能解决这个问题了。

这是我的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;

我试图尝试/捕捉Axios呼叫并使用rejectWithValue助手，但似乎没有什么改变。这是复制问题的代码沙箱。Redux片位于store/listings，导致组件src/Listings失效。

如果你删除loremm -ipsum…错误的uri并取消jsonplaceholder端点的注释，您可以很容易地看到一切都工作正常。错误的uri被故意使用来触发404错误并获得分派的拒绝操作，不幸的是根本没有发生。

Answer 1

我认为这是你的测试url的问题。

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

使用保证404响应的服务似乎都在工作:https://mock.codes/404

fetchListings。被拒绝的案例被执行。