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)
})
},
})