createAsyncThunk action always rejected - reactjs

Question

Hi i have a problem with createAsyncThunk, i have started a json-server with json document in it.
i'm tryng to dispatch the action getTodos but the action is always rejected and i do not why.
i'm sure the server is working properly because i testes it with postman, any one can help me?
import { createAsyncThunk, createSlice } from "#reduxjs/toolkit";
import { filterTodo } from "./FilterSlice";
// the url are deleted for privacy
const urlTodos = "";
const urlFilter = "";
export const getTodos = createAsyncThunk(
"todos/getTodos",
async (data = null, thunkAPI) => {
const todosPromise = fetch(urlTodos)
.then((resp) => resp.json())
.then((res) => res);
console.log("todoPromise", typeof todosPromise);
const filterPromise = fetch(urlFilter)
.then((resp) => resp.json())
.then((res) => res);
let [todos, activeFilter] = await Promise.all([
todosPromise,
filterPromise,
]);
thunkAPI.dispatch(filterTodo(activeFilter));
return todos;
}
);
export const todosSlice = createSlice({
name: "todos", // nome della slice
initialState: [],
reducers: {
addTodo(state, action) {
console.log("add todo");
state.push(action.payload);
},
removeTodo(state, action) {
state = state.filter((todo) => todo.name !== action.payload.name);
return state;
},
toggleTodo(state, action) {
state = state.map(function (todo) {
if (todo.id === action.payload.id) {
todo.completed = !todo.completed;
}
});
},
},
extraReducers: (builder) => {
// reducer che gestisce la pending action
builder
.addCase(getTodos.pending, (state, actions) => {
state.status = "loading";
console.log("in pending");
})
.addCase(getTodos.fulfilled, (state, action) => {
state.status = "success";
console.log("in getTodos fulfilled", action.payload);
state = action.payload;
return state;
})
.addCase(getTodos.rejected, (state, action) => {
console.log("in getTodos rejected", action.payload);
});
},
});
const { actions, reducer } = todosSlice;
export const { addTodo, removeTodo, toggleTodo } = actions;
export default reducer;
it was dispatched in the following way
const dispatch = useDispatch();
useEffect(() => {
console.log("dentro use effect");
dispatch(getTodos());
return () => {};
}, [dispatch]);
and the structure of the json object is the following
{
"todos": [
{
"completed": true,
"name": "Call my mum",
"dueDate": "17/3/2022",
"user_id": 1,
"id": 1
},
{
"completed": false,
"name": "go to school",
"dueDate": "17/3/2022",
"user_id": 2,
"id": 2
},
{
"completed": true,
"name": "do homework",
"dueDate": "17/3/2022",
"user_id": 3,
"id": 3
}
],
"filter": ["ALL"]
}
this is what appen when i try to excute the program
the console is that
the redux extension of chrome reports this error

Answer 1

i found the error:
extraReducers: (builder) => {
builder
.addCase(getTodos.pending, (state, actions) => {
console.log("in pending");
})
.addCase(getTodos.fulfilled, (state, action) => {
console.log("in getTodos fulfilled", action.payload);
state = action.payload;
return state;
})
.addCase(getTodos.rejected, (state, action) => {
console.log("in getTodos rejected", action.payload);
});
},
});
i removed the state.status = string and now it works