When I call another asynchronous action in an asynchronous action, it returns an error. How to fix this error??? I use redux-thunk
Here is the first action that requests a server to get an array of objects (calendars)
getCalendars: () => async (dispatch: AppDispatch, getState: GetState) => {
try {
const { token } = getState().authReducer;
const res: AxiosResponse<{ calendars: Calendar[] }> = await axios.get(
"http://26.193.135.145:8000/api/calendars/",
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
dispatch(CalendarActionCreators.getCalendarsSuccess(res.data.calendars));
} catch (error: any) {
const err: AxiosError = error;
dispatch(
CalendarActionCreators.getCalendarsError(err.response?.data.message)
);
console.log(err.response?.data.message);
}
}
Here is the second action that sends a newly created object (calendar) to the server, and to add a new calendar to the list we re-send the request to the server by calling the previous action.
createCalendar:
(title: string, description: string) =>
async (dispatch: AppDispatch, getState: GetState) => {
try {
const newCalendar: CalendarObject = { title, description };
console.log(newCalendar);
const { token } = getState().authReducer;
const res: AxiosResponse = await axios.post(
"http://26.193.135.145:8000/api/calendars/",
newCalendar,
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
if (res.status === 200) {
// here is an error
//dispatch(CalendarActionCreators.getCalendars());
}
} catch (error: any) {
const err: AxiosError = error;
dispatch(
CalendarActionCreators.createNewCalendarError(
err.response?.data.message
)
);
console.log(err.response?.data.message);
}
},