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.
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.
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.