如何在redux工具包中设置正确的action.payload类型?

p3rjfoxz  于 2022-11-24  发布在  其他
关注(0)|答案(1)|浏览(153)

我正在用typescript写我的第一个mern-stack。我的登录和注册工作正常。现在我想通过redux-toolkit更新、删除和获取用户。在下面的代码中,从builder到action.payload的整行都加了下划线,我得到了以下错误:
无法将AsyncThunkFulfilledActionCreator〈对象,对象,AsyncThunkConfig〉参数赋给字符串参数。ts(2769)
我尝试了不同的方法,比如在update函数中使用object[],尝试了不使用接口Initialstate。当我删除PayloadAction〈User[]〉时,只有action.payload带有下划线,我得到了错误:
无法将对象参数指派给WritableDraft参数。型别{}遗漏型别WritableDraft的下列属性:名、姓、用户名、电子邮件和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)
      })
    },
})
v1l68za4

v1l68za41#

假设userService.updateUser返回User。应将Return参数键入为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);
      });

相关问题