Redux Toolkit Slice 在使用 extraReducer 时生成错误类型“WritableDraft<AppApiError>”

Question

我将初始状态的数据和错误输入为 MednannyAppointments[] 和 AppApiError。当我将鼠标悬停在 extraReducer 调用中的 state.error 或 state.data 上时，类型始终为 WritableDraft。我不明白这是从哪里来的。

如果你看看我的额外减速器功能，我已经输入了所有内容。

额外减速功能

export const getMednannyAppointments = createAsyncThunk<
  MednannyAppointment[],
  string,
  { rejectValue: AppAPIError }
>("mednanny/getAppointments", async (vsnr: string) => {
  return await fetchFromAPI<MednannyAppointment[]>(
    MEDNANNY_ROUTES.GET_APPOINTMENTS,
    "GET",
    {
      vsnr
    }
  );
});

切片

type InitialAppointmentState = {
  data: MednannyAppointment[];
  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<MednannyAppointment>) {
      state.data = state.data.map((appointment) =>
        appointment.id === action.payload.id ? action.payload : appointment
      );
    }
  },
  extraReducers: (builder) => {
    builder.addCase(getMednannyAppointments.fulfilled, (state, action) => {
      state.isFetching = false;
      state.data = action.payload;
    });
    builder.addCase(getMednannyAppointments.pending, (state, action) => {
      state.isFetching = true;
    });
    builder.addCase(getMednannyAppointments.rejected, (state, action) => {
      state.isFetching = false;
      
      // state.error has a type of WritableDraft<AppApiError> instead of AppApiError
      state.error = action.payload;
    });
  }
});

Answer 1

RTK 在底层使用

immer

 库来支持不变性。因此，整个结构（包括嵌套的 props）被包装在一个代理中，该代理跟踪突变而不改变原始对象。

更多详细信息请参见此处和此处RTK #5：为什么将沉浸器放入入门套件中？以及有关沉浸器的一些详细信息