How to select part of a NGXS state?

Question

I'm reading and trying the documentation of NGXS: https://www.ngxs.io/concepts/select

Except I'm doing this for my AuthState.

I've already implemented the AuthStateModel and the AuthState:

import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';
import { Action, NgxsOnInit, Selector, State, StateContext } from '@ngxs/store';
import { profile } from 'console';
import { User } from 'firebase';
import { LoginWithPasswordAction, RegisterAction, SendLostPasswordAction, SignoutAction } from './auth.actions';
import { Profile } from './auth.model';
import { emailToGravatarUrl } from 'email-gravatar';
import { switchMap } from 'rxjs/operators';
import { Observable, of, Subscription } from 'rxjs';
import { Injectable, OnDestroy } from '@angular/core';

export interface AuthStateModel {
  profile: Profile | null;
  loaded: boolean;
}
@State<AuthStateModel>({
  name: 'auth',
  defaults: {
    profile: null,
    loaded: false,
  },
})
@Injectable()
export class AuthState implements NgxsOnInit, OnDestroy {
  private profileSubscription: Subscription;

  constructor(private angularFireAuth: AngularFireAuth, private angularFireStore: AngularFirestore) {}

  ngOnDestroy(): void {
    //some cleaning
  }

  ngxsOnInit(ctx?: StateContext<any>) {
    //Some init
  }

    /// Some actions...
}

but now in my app.component.ts, I'm struggling to select.

According to them, I should be able to do something like:

@Select(AuthState.profile.displayName) name$: Observable<string>;

But VS Code says(and for what I see, I agree) that there is no "profile" on AuthState, which is correct, because this property exists on the AuthModel.

I've seen the Memoized Selectors that comes after, but that's not really the point. Also I've tried to make one that return the Profile, and then use just AuthState.Profile.displayName, but same result on displayName.

What am I missing?

you can use redux dev tools to visualize the state of your store at any given time, this can help you https://codeburst.io/redux-devtools-for-dummies-74566c597d7 — Elmehdi, Oct 06 '20 at 18:37

score 0 · Answer 1 · answered Oct 13 '20 at 02:48

To select just the profile part of the state the simplest/easiest way would be to define a selector

@Selector()
static profile(state: AuthStateModel): Profile { 
 return state.profile;
}

Then you can use it in your component via the static reference in your example @Select(AuthState.profile)

Alternatively, you could @Select(state => state.profile.displayName) directly, or create an observable that projects what you need:

@Select(AuthState) authState$: Observable<AuthStateModel>;

displayName$: Observable<string>;

ngOnInit(): void { 

  this.displayName$ = this.authState$.pipe(
    filter(state => !!state.profile),
    map(state => state.profile.displayName),
  );
}

NGXS team is collecting community feedback in some very cool new state helpers to help you slice your state. You can check them out here. There is a link at the bottom of the feature request if you have feedback or questions. — Mateus Carniatto, Nov 18 '20 at 19:27

How to select part of a NGXS state?

1 Answers1