Свойство 'map' не существует для типа 'OperatorFunction ».ts (2339)

Question

Я новичок в ngrx и следую не такому старому учебнику, но кажется, что способы "map", "ofType", "of" и "pipe" изменились, поэтому "map" и "of" выдают ошибки

Ошибка «карты»: свойство «карта» не существует для типа «OperatorFunction» .ts (2339)

и

«of» Ошибка: / / Свойство 'of' не существует для типа 'typeof Observable'.ts (2339)

Вот действие:

export class GetUser implements Action {
     readonly type = GET_USER;
     constructor(public payload?: any) { }
}

Здесь приведен эффект:

@Effect()
 getUser: Observable<Action> = this.actions.pipe(ofType(userActions.GET_USER)
      **.map**((action: userActions.GetUser) => action.payload)
      .switchMap(payload => this.afAuth.authState)
      .delay(2000)
      .map(authData => {
           if (authData) {
                const user = new User(authData.uid, authData.displayName);
                return new userActions.Authenticated(user);
           } else {
                return new userActions.NotAuthenticated();
           }
      }).catch(err => Observable.**of**(new userActions.AuthError()));

Answer 1

Да, они изменились в Rx JS v6, я думаю, что это было. Теперь многие из них считаются «конвейерными» операторами, что означает, что они передаются в метод pipe в качестве аргументов, а не в цепочку, как вы делаете здесь. Ваш код должен выглядеть примерно так:

@Effect()
 getUser: Observable<Action> = this.actions.pipe(
     ofType(userActions.GET_USER),
     map((action: userActions.GetUser) => action.payload),
     switchMap(payload => this.afAuth.authState),
     debounceTime(2000),
     map(authData => {
           if (authData) {
                const user = new User(authData.uid, authData.displayName);
                return new userActions.Authenticated(user);
           } else {
                return new userActions.NotAuthenticated();
           }
      }),
      catch(err => of(new userActions.AuthError())
    )
 );

Я не уверен, почему задержка была там, но похоже, что вы хотите сделать паузу на 2000 миллисекунд, прежде чем продолжить, поэтому я заменил этот метод на debounceTime.

Кроме того, если вы используете VS Code, получите самое последнее расширение Angular Essentials, и оно поможет вам с импортом.

Будут импортированы такие методы, как map и switchMap. из rxjs / operator, а методы создания, такие как of, будут импортированы из rx js

Answer 2

Похоже, что это использует более старую версию Rx JS. Начиная с версии 6 (я считаю), должны использоваться конвейерные операторы. Они импортируются из 'rxjs/operators', например import { map } from 'rxjs/operators';

@Effect()
 getUser: Observable<Action> = this.actions.pipe(ofType(userActions.GET_USER)
      ,map((action: userActions.GetUser) => action.payload)
      ,switchMap(payload => this.afAuth.authState)
      ,delay(2000)
      ,map(authData => {
           if (authData) {
                const user = new User(authData.uid, authData.displayName);
                return new userActions.Authenticated(user);
           } else {
                return new userActions.NotAuthenticated();
           }
      });

См. Документы https://rxjs-dev.firebaseapp.com/guide/operators