Блог

Я читаю и пробую документацию NGXS: https://www.ngxs.io/concepts/select

За исключением того, что я делаю это для своего состояния аутентификации.

Я уже реализовал AuthStateModel и 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...
}
  

но теперь в моем app.component.ts я изо всех сил пытаюсь выбрать.

По их словам, я должен быть в состоянии сделать что-то вроде:

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

Но VS Code говорит (и, насколько я вижу, я согласен), что в AuthState нет «профиля», что правильно, потому что это свойство существует в AuthModel.

Я видел запомненные селекторы, которые появляются после, но на самом деле это не главное. Также я попытался создать тот, который возвращает профиль, а затем использует только AuthState.Profile.DisplayName, но тот же результат для DisplayName.

Чего мне не хватает?

Чтобы выбрать только profile часть состояния, самым простым / простым способом было бы определить селектор

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

Затем вы можете использовать его в своем компоненте через статическую ссылку в вашем примере @Select(AuthState.profile)

В качестве альтернативы, вы можете @Select(state => state.profile.displayName) напрямую или создать наблюдаемый объект, который проецирует то, что вам нужно:

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

displayName$: Observable<string>;

ngOnInit(): void { 

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