Ngrx 6.1.0 - Select is deprecated - What is the new syntax?

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'?

score 43 · Accepted Answer · answered Aug 03 '18 at 12:40

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;
      });
   }


}

Seems like per @timdeschryver's answer, it's undeprecated. Some reasons included that the method is easier to mock and test, which is something to consider when using the pipeable operator instead. — MattTreichel, Nov 25 '19 at 19:44

score 24 · Answer 2 · answered Dec 25 '18 at 10:40

24

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

For more info, see the associated Pull Request.

answered Dec 25 '18 at 10:40

timdeschryver

14,415
1
19
32

score 8 · Answer 3 · answered Sep 06 '18 at 10:34

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(/* .. */);

Ngrx 6.1.0 - Select is deprecated - What is the new syntax?

3 Answers3

Linked