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

似乎这样正在使用旧版本的RxJS。从版本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

Answer 2

是的，我认为是在RxJS 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 / operators导入，而of之类的创建方法将从rxjs导入

类型'OperatorFunction <Action，never>'不存在属性'map'.ts（2339）

2 个答案: