reactjs - ฉันตั้งค่าประเภทของ action.payload ใน redux-toolkit ถูกต้องอย่างไร?

ฉันกำลังเขียน mern-stack ครั้งแรกของฉันด้วย typescript การเข้าสู่ระบบและการลงทะเบียนของฉันทำงานได้ ตอนนี้ฉันต้องการอัปเดต ลบ และดึงข้อมูลผู้ใช้ผ่าน redux-toolkit ในโค้ดต่อไปนี้บรรทัดทั้งหมดจาก builder ลงไปจนถึง action.payload ถูกขีดเส้นใต้และฉันได้รับข้อผิดพลาดดังต่อไปนี้:

ไม่สามารถกำหนดค่าอาร์กิวเมนต์ AsyncThunkFulfilledActionCreator ไปยังพารามิเตอร์สตริงได้.ts(2769)

ฉันลองทำหลายวิธี เช่น การใส่ object[] ในฟังก์ชัน update, ลองทำโดยไม่ใช้ interface Initialstate เมื่อฉันลบ PayloadAction<User[]> ออก มีเพียง action.payload ที่มีเส้นใต้และฉันได้รับข้อผิดพลาด:

อาร์กิวเมนต์วัตถุไม่สามารถถูกกำหนดค่าให้กับพารามิเตอร์ WritableDraft ได้ ประเภท {} ขาดคุณสมบัติต่อไปนี้ของประเภท WritableDraft: firstname, lastname, username, email, และอีก 8 รายการ.ts(2345)

นั่นคือรหัส:

interface User{
  firstname:string
  lastname:string
  username:string
  email:string
  street:string
  number:string
  plz:string
  city:string
  password:string
  isAdmin:boolean
  createdAt: Date
  accessToken: string;
}
interface InitialState{
    user: User[],
    isLoading:boolean,
    isSuccess:boolean,
    isError:boolean,
    message:string,
}
const initialState:InitialState ={
    user: [],
    isLoading:false,
    isSuccess:false,
    isError:false,
    message:"",

}
type AsyncThunkConfig = {
    state: RootState
}
export const updateUser = createAsyncThunk<object, object, AsyncThunkConfig>('/user/update', async (updateData:object, thunkAPI)=>{
    try{
        const token = thunkAPI.getState().auth.user!.accessToken;
        return await userService.updateUser(updateData, token);
    }catch (error:any) {
      const message =
        (error.response &&
          error.response.data &&
          error.response.data.message) ||
        error.message ||
        error.toString()
      return thunkAPI.rejectWithValue(message as string)
    }
});
export const userSlice = createSlice({
    name: 'user',
    initialState,
    reducers:{
        reset:(state)=>{
            state.isLoading = false;
            state.isSuccess = false;
            state.isError = false;
            state.message = "";
        }
    },
    extraReducers(builder) {
      builder
      .addCase(updateUser.pending, (state)=>{
        state.isLoading = true;
      })
      .addCase(updateUser.fulfilled, (state, action:PayloadAction<User[]>)=>{
        state.isLoading = false;
        state.isSuccess = true;
        state.user.push(action.payload)
      })
    },
})

คำตอบ #1

สมมติว่า userService.updateUser คืนค่าเป็น User คุณควรพิมพ์อาร์กิวเมนต์ที่คืนค่าเป็น User

export const updateUser = createAsyncThunk<User, object, AsyncThunkConfig>(

คุณสามารถลบประเภทออกจากรีดิวเซอร์ได้เลย เพราะ addCase จะสามารถสรุปประเภทจากแอ็กชันของคุณโดยอัตโนมัติ

      .addCase(updateUser.fulfilled, (state, action) => {
        state.isLoading = false;
        state.isSuccess = true;
        state.user.push(action.payload);
      });