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

问题

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

回答1:

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


}

回答2:

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

For more info, see the associated Pull Request.

回答3:

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

来源：https://stackoverflow.com/questions/51672633/ngrx-6-1-0-select-is-deprecated-what-is-the-new-syntax

标签

ngrx