How I write a userCrud with typescript in redux-toolkit?

Hello everyone, I am really fighting to understand typescript. In my dashboard, I want to update, delete, and get the users and Informations about the users. So I send the data via redux-toolkit to the database and get it back from there. My register and login, logout are working. But in the follwing code it underlines action.payload in the extraReducer and tells me:

The object argument cannot be assigned to the WritableDraft parameter.
Type {} is missing the following properties of type WritableDraft: firstname, lastname, username, email, and 8 others.ts(2345)

I tried to set action:Payloadaction<User> Then it tells me:

The AsyncThunkFulfilledActionCreator<object, object, AsyncThunkConfig> argument cannot be assigned to the string parameter.ts(2769)

I tried Initialstate extends User, but then it tells me:

In type “{ user: never; isLoading: false; isSuccess: false; isError: false; message: string; }”, the following properties of type “InitialState” are missing: “firstname, lastname, username, email” and 8 others.ts(2740)

Thanks for help. Here is the code:

import {createSlice, createAsyncThunk, PayloadAction} from '@reduxjs/toolkit';
import { RootState } from '../../app/store';
import userService from './userService';

interface User{
  vorname:string
  nachname: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 deleteUser = createAsyncThunk<object, string, AsyncThunkConfig>('/user/delete', async (Id:string, thunkAPI)=>{
    try{
        const token = thunkAPI.getState().auth.user!.accessToken;
        return await userService.deleteUser(Id, 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 getUser = createAsyncThunk<object, string, AsyncThunkConfig>('/user/find', async (Id:string, thunkAPI)=>{
    try{
        const token = thunkAPI.getState().auth.user!.accessToken;
        return await userService.getUser(Id, 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 getAllUser = createAsyncThunk<object, any, AsyncThunkConfig>('/user/findAll', async (_, thunkAPI)=>{
    try{
        const token = thunkAPI.getState().auth.user!.accessToken;
        return await userService.getAllUser(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 getUserStats = createAsyncThunk<object, any, AsyncThunkConfig>('/user/stats', async (_, thunkAPI)=>{
  try{
      const token = thunkAPI.getState().auth.user!.accessToken;
      return await userService.getUserStats(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)=>{
        state.isLoading = false;
        state.isSuccess = true;
        state.user.push(action.payload)
      })
    },
})

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.