this.store.select(selectValues) Vs this.store.pipe(select(selectValues)) in NgRx

huangapple go评论57阅读模式
英文:

this.store.select(selectValues) Vs this.store.pipe(select(selectValues)) in NgRx

问题

  1. this.store.select(selectValues)
  2. this.store.pipe(select(selectValues))
  3. this.store.pipe(map(state => selectValues(state)))
英文:

On this page of NgRx selectors, there are few ways the select function can be called.

  1. this.store.select(selectValues)
  2. this.store.pipe(select(selectValues))
  3. this.store.pipe(map(state => selectValues(state)))

What are the differences between the above three?

答案1

得分: 4

首先,this.store.select()this.store.pipe(select()) 本质上是相同的。

基于这个 文件,我们可以看到 Store 继承了 Observable。此外,当调用 store.select() 时,我们可以看到调用了一个不同的 select 函数。这个函数被定义为一个 自定义的 RxJS 操作符,其返回类型是另一个函数,接受一个 Observable(即源 Observable)作为其唯一参数,也返回一个 Observable。

这意味着无论你选择哪种方法,都会得到相同的结果,两种方法都会返回一个你可以操作的 Observable。

与第三种方法的区别是,.map(state => selectValues(state)),与前两种方法严格比较,这种方法不会在最后添加一个 distinctUntilChanged() 操作符。

英文:

First of all, this.store.select(), and this.store.pipe(select()) are essentially the same.

Based on this file, we can see that Store extends Observable. Moreover, when store.select() is called, we can see that a different select function is called. This function is defined as a custom RxJS operator, which is a function whose return type is another function which accepts an Observable(i.e. the source Observable) as its sole argument and also returns an Observable.

This means that whichever approach you choose, the same result is achieved and both methods will return an Observable that you can work with.

The difference with the third approach, .map(state => selectValues(state)), when strictly compared to the previous two, is that this one won't add a distinctUntilChanged() operator at the end.

huangapple
  • 本文由 发表于 2023年7月4日 22:18:08
  • 转载请务必保留本文链接:https://go.coder-hub.com/76613562.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定