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

Question

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?

Answer 1

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.