Luiz Paulo Pinto
Luiz Paulo Pinto

Reputation: 1

NGXS state prop always undefined, even with data in the response

I'm trying to access the prop of a state that was set via payload, but it always remains undefined

The user state is set here, in the component:

async handleSignIn() {
    const data = this.authForm.getRawValue();
  
    const payload: SigninDTO = {
      email: data.email,
      password: data.password,
    }
  
    try {
      const response = await firstValueFrom(await this.service.signIn(payload))      
  
      localStorage.setItem('token', JSON.stringify(response));

      this.store.dispatch(new SetUser(response));
  
      await this.router.navigate(['/']);
    } catch (error) {
      const message = this.handleErrorMessage(error);
      this.snackService.openWithCustomStyle(ToastType.ERROR, message);
    }
  }

The actions:

export class SetUser {
    static readonly type = '[User] Set';
    constructor(public payload: User) {}
}

export class RemoveUser {
    static readonly type = '[User] Remove';
}

export class GetUser {
    static readonly type = '[User] Get';
}

export class SetRole{
    static readonly type = '[Role] Set';
    constructor(public payload: Roles[]) {}
}```

export class UserStateModel {
  user!: User | null;
  currentRoles!: Roles[] | null;
}

And how i'm trying to set the state:

 @Action(SetUser)
  setUser(ctx: StateContext<UserStateModel>, { payload }: SetUser) {
    ctx.patchState({
      user: payload,
      currentRoles: payload.roles,
    });
  }

My entities:

export class User {
    id!: string;

    name!:string;

    email!: string;

    company!: Company;

    token!: string;

    roles!: Roles[];
}


export class Roles {
    id!: string;

    roleReference!: string;

    createdAt!: Date;

    updatedAt!: Date;

    deletedAt!: Date;
}

I tried both ways:

  public userRoles = signal<Roles[]>([]);

  constructor(
    private authService: AuthService,
    private store: Store
  ) {}

  async ngOnInit(): Promise<void> {
     this.getUserProfiles();
  }

  async getUserProfiles():Promise<void>{
    const user = await this.store.selectSnapshot(UserState.userRoles)

    if(user){
      this.userRoles.set(user)
    }

  }

and this:

  const user = await this.store.selectSnapshot(UserState.getUser)

    if(user){
      this.userRoles.set(user.roles)
    }

The server response object is correct, but the only property I can't access is Roles

I'm trying to undertand why i 'can't access the prop from payload in the store (management state)

Upvotes: 0

Views: 66

Answers (0)

Related Questions