Ngrx:是否可以部分使用异步管道



我想知道当我使用 ngrx stroe 时是否可以部分使用异步管道。

例如

// ts file
this.name$ = this.store.pipe(
      select(SOME.STATE),
      map((item) => {
        return item.name;
      })
    )
// html file
<p>{{name$ | async}}</p>

这很简单,但如果我需要怎么办

// ts file
this.store.pipe(
      select(SOME.STATE),
    )
.subscribe(item => {
  this.name = item.name;
  this.age = item.age // <-
})
someMethod() {
  const age = this.age;
  // ...some processes using 'age' data which from store
}
// html file
<p>{{name}}</p>

像上面一样,如果我有多个数据并且必须进行一些后处理(例如someMethod()),我不确定如何处理异步管道。没有更多的异步管道意味着我还必须手动unsubscribe,从而使代码更加冗长。

我试过以下

// ts file
this.name$ = this.store.pipe(
      select(SOME.STATE),
      map((item) => {
        return item.name;
      })
    )
this.store.pipe(
      select(SOME.STATE),
    )
.subscribe(item => {
  this.age = item.age
})
someMethod() {
  const age = this.age;
  // ...some processes using 'age' data which from store
}

// html file
<p>{{name$ | async}}</p>

工作,但我想知道是否有更好的方法。

谢谢。

使用 tap 运算符执行此操作,而不是订阅。

this.name$ = this.store.pipe(
    select(SOME.STATE),
    tap(item => this.age = item.age),
    map((item) => {
        return item.name;
    }));

不过,仍然没有理由这样做。相反,您应该简单地拥有另一个可观察对象,例如age$ .

最新更新