I defined my initial state as MednannyAppointments[] for data and AppApiError for error. However, when I hover over state.error or state.data in my extraReducer calls, the type is always WritableDraft. This behaviour is confusing to me.
Even though I have already specified types in my extra reducer function.
Extra Reducer Function
export const getAppointments = createAsyncThunk<
Appointment[],
string,
{ rejectValue: AppAPIError }
>("something/getAppointments", async (vsnr: string) => {
return await fetchFromAPI<Appointment[]>(
ROUTES.GET_APPOINTMENTS,
"GET",
{
XXX
}
);
});
Slice
type InitialAppointmentState = {
data: Appointment[];
isFetching: boolean;
error: AppAPIError;
};
const initialAppointmentState: InitialAppointmentState = {
data: null,
isFetching: false,
error: null
};
const appointments = createSlice({
name: "appointments",
initialState: initialAppointmentState,
reducers: {
updateAppointement(state, action: PayloadAction<Appointment>) {
state.data = state.data.map((appointment) =>
appointment.id === action.payload.id ? action.payload : appointment
);
}
},
extraReducers: (builder) => {
builder.addCase(getAppointments.fulfilled, (state, action) => {
state.isFetching = false;
state.data = action.payload;
});
builder.addCase(getAppointments.pending, (state, action) => {
state.isFetching = true;
});
builder.addCase(getAppointments.rejected, (state, action) => {
state.isFetching = false;
// state.error has a type of WritableDraft<AppApiError> instead of AppApiError
state.error = action.payload;
});
}
});