CODEWITHSUNDEEP
angularrxjsobservablengrxngrx-store
Nicolas Bodin
Nicolas Bodin

Reputation: 1591

Angular - NgRx - difference between .select(...) and .pipe(select...)

I am using NgRx in my Angular project. I want to access the products that are stored in my store from my ProductsComponent.

ProductsComponent.ts

...
import { select, Store } from '@ngrx/store';
...
constructor(private store: Store<any>) {}

I'm wondering what is the differences between:

public products = this.store.select(selectProducts);

and

public products = this.store.pipe(select(selectProducts));

and which one I should use.

Upvotes: 10

Views: 6030

Answers (2)

timdeschryver
timdeschryver

Reputation: 15507

Both select methods behave the same and have the same functionality. The difference is that one is a method on the store, while the other is a RxJS pipe.

The NgRx team promotes to use store.select because it's more friendly to use (you don't have to import the operator). There's even a eslint rule select-style that encourages to use store.select.

Upvotes: 11

maxime1992
maxime1992

Reputation: 23793

The new preferred syntax is

public products = this.store.pipe(select(selectProducts));

The syntax this.store.select is deprecated:

  /**
   * @deprecated Selectors with props are deprecated, for more info see {@link https://github.com/ngrx/platform/issues/2980 Github Issue}
   */
  select<K, Props = any>(
    mapFn: (state: T, props: Props) => K,
    props: Props
  ): Observable<K>;

See source code here: https://github.com/ngrx/platform/blob/master/modules/store/src/store.ts#L27-L33

They've changed that since Rxjs moved to a chained API to a composable one (using pipe and importing the operators you need). This has allowed tree shaking on Rxjs and Ngrx now recommends the new pattern.

Upvotes: 0

Related Questions