web-dev-qa-db-fra.com

Ngrx 6.1.0 - Select est obsolète - Quelle est la nouvelle syntaxe?

La sélection ngrx suivante est obsolète.

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

J'ai trouvé cela à store.d.ts

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

Alors ... quelle est la syntaxe correcte?

J'essaie

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

Erreur: Impossible de trouver le nom 'select'. Voulez-vous dire 'onselect'?

ngrx
19
Michalis
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;
      });
   }


}
32
Michalis

Selon NgRx 7, la méthode select n'est pas obsolète.

Pour plus d’informations, voir l’associé demande d’enregistrement .

10
timdeschryver

Comme l'a mentionné @ Michalis, récupérez simplement select à partir de @ngrx/store.

Les sélecteurs vous permettent de composer un modèle de lecture pour l'état de votre application. En termes de modèle architectural CQRS, NgRx sépare le modèle de lecture (sélecteurs) du modèle d'écriture (réducteurs). Une technique avancée consiste à combiner des sélecteurs avec des opérateurs raccordables RxJS.

Cette fonctionnalité a été ajoutée dans v5.0. , et depuis lors, this.store.select() est obsolète. Cependant, une notification pour la même chose est ajoutée dans la version v6.1.0. Comme Store<T> S'étend lui-même Observable<T>, Il renvoie observable, qui peut facilement être abonné à l'aide de .subscribe() ou peut être manipulé/transformé à l'aide de différents opérateurs de correctif.

RxJS a introduit les opérateurs pipables et .pipe() dans v5.5 . Il existe également une fonction d’utilitaire de canal qui peut être utilisée pour créer des opérateurs pouvant être canalisés. Dans la version v5, l’opérateur pipe() custom select est créé. Découvrez ceci lien ou un exemple de base (ignorer l'état vide) est donné ci-dessous, pour en savoir plus.

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