Search code examples
angularrxjsngrx

RxJs pluck vs NgRx select


I'm developing an Angular application with an NgRx store, and have a service that mediates between the view and the store. When I write a function to retrieve a piece of the store, I tend to use NgRx's select operator:

getSomeInfoFromStore(): Observable<SomeInfo> {
  return this.store.pipe(select('SomeInfo'));
  // --------------------^^^^^^
}

But I have also seen similar service functions written using RxJs's 'pluck' operator:

getSomeInfoFromStore(): Observable<SomeInfo> {
  return this.store.pipe(pluck('SomeInfo'));
  // --------------------^^^^^
}

What is the difference between RxJs's pluck operator and NgRx's select operator? Are they interchangeable? If not, when should I use each?


Solution

  • In your example it does the same AFAIK.

    The difference is that NgRx's select can make use of selectors, where the real power is. By creating selectors with the createSelector method you gain a performance boost because it will only be invoked when the state changes.

    https://ngrx.io/guide/store/selectors