Typescript Redux-toolkit - cannot find accessToken

Hallo everyone, I need some help.
I am writing a redux-toolkit create function and it is the first time I am using typescript. Currently Vs-code underlines accessToken and tells me:

The property accessToken does not exist for the User type.ts(2339)

I googled this and have found, that I should add the property to the interface but this brought no solution. Here is my function:

type AsyncThunkConfig = {
    state: RootState
}
export const createCardImage = createAsyncThunk<object, object, AsyncThunkConfig>('cardImages/create', async (cardImagesData, thunkAPI)=>{
    try{
    const token = thunkAPI.getState().auth.user!.accessToken;
        return await cardImagesService.createCardImages(cardImagesData, 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)
      }
})

That are my interfaces and initialState in my authslice:

const user = JSON.parse(localStorage.getItem('user') || '');
interface User {
  vorname:string;
  nachname:string;
  username:string;
  email:string;
  street:string;
  number:string;
  plz:number;
  city:string;
  password:string;
  isAdmin:boolean;
  createdAt: Date;
  accessToken?:string;
}
interface InitialState{
  user:User[] | null;
  isLoading:boolean;
  isSuccess:boolean;
  isError:boolean;
  message: string;
  auth?:boolean;
}
const initialState: InitialState = {
    user: user ? user : null,
    isLoading:false,
    isSuccess:false,
    isError:false,
    message:"",
};

Thanks for your help.
Best Roman

it says that it does not exist because result could be undefined, as you declared accessToken optional.

  • Replace “accessToken?:string” by “accessToken:string”
  • Add a default empty string in the global state {accessToken: “”}

But something is weird user:User is an array but you call it as an obj

Hello NielsDom, thanks for your response. I deleted the questionmark. But how I can set global state {accessToken:“”}. I have set an Interface user in the global.d.ts, there I have accessToken as string. User is an object array.

Fill your initial user state with empty value instead to put Null condition

user = { 
  ...,
  accessToken: “”,
  ...
}
const initialState: InitialState = {
    user,
    isLoading:false,
    isSuccess:false,
    isError:false,
    message:"",
};

Or instead you could try to tell typescript that value is not null with “!” :
thunkAPI.getState().auth.user!.accessToken!

IMO don’t worry, typescript is here to help, not here to force you to change your architecture

Hello NielsDom, I have tried all that, but the error stays. The interesting is, that when I hover accessToken, Vs-code tells me the correct type : user.accesstoken.

Hard to tell I would instead to do conditions with null or undefined, to put directly the state with a default empty string or number value in your User state, so you avoid to check each parent if they not exist (it is what I do in my projects). Moreover, it would declare the type directly, so you may not need interface

By the way you can clean this

error.response &&
            error.response.data &&
            error.response.data.message

to
error.response?.data?.message

EDIT:I ve just check their tutorial video: Tutorials Overview | Redux Toolkit

Same as what I said, they declare default value in the global state, it makes the type, no need the interface and conditional stuff.

Good luck!

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