Ngrx 6.1.0 - Select is deprecated - What is the ne

Question

The following ngrx select is deprecated.

this.store.select(state => state.academy.academy).subscribe((academy) => {
    this.academy = academy;
});

I found this at store.d.ts

@deprecated from 6.1.0. Use the pipeable `select` operator instead.

So... what's the correct syntax?

I try

this.store.pipe(select(state => state.academy.academy).subscribe((academy) => {
    this.academy = academy;
}))

Error: Cannot find name 'select'. Did you mean 'onselect'?

Answer 1

As @Michalis mentioned, just get select from @ngrx/store.

Selectors empower you to compose a read model for your application state. In terms of the CQRS architectural pattern, NgRx separates the read model (selectors) from the write model (reducers). An advanced technique is to combine selectors with RxJS pipeable operators.

This feature was added in v5.0.0, and since then this.store.select() has been deprecated. However, notice for the same is added in release v6.1.0. As Store<T> itself extends Observable<T>, it returns observable which can easily be subscribed using .subscribe() or can be manipulated/transformed using different patch operators.

RxJS introduced pipable operators and .pipe() in v5.5. There is also a pipe utility function that can be used to build reusable pipeable operators. In release v5, with the help of pipe() custom select operator is built. Check out this link or basic example(ignore empty state) is given beneath, to learn more.

import { select } from '@ngrx/store';
import { pipe } from 'rxjs';
import { filter } from 'rxjs/operators';

export const selectFilteredState = pipe(
  select('sliceOfState'),
  filter(state => state !== undefined)
);

store.pipe(selectFilteredState ).subscribe(/* .. */);

Answer 2

import {Component, OnInit} from '@angular/core';
import {Store, select} from '@ngrx/store';
import {AppState} from '../../../../../app.state';

@Component({
   selector: 'app-layout',
   templateUrl: './layout.component.html',
   styleUrls: ['./layout.component.scss']
})
export class PageLayoutComponent implements OnInit {

   academy;

   constructor(
      private store: Store<AppState>
   ) {
   }

   ngOnInit() {
      this.store.pipe(select((state: any) => state.academy.academy)).subscribe((academy) => {
         this.academy = academy;
      });
   }


}

Answer 3

As per NgRx 7, the select method is un-deprecated.

For more info, see the associated Pull Request.