Utilisation de sélecteurs pour accéder à l'état

Qu'est-ce qu'un sélecteur ?

Un sélecteur est une fonction pure qui prend l'état de l'application et renvoie une partie de cet état. Les sélecteurs sont utilisés pour sélectionner des données spécifiques de l'état pour être utilisées dans les composants.

Comment créer un sélecteur ?

Voici un exemple de sélecteur qui sélectionne la valeur du compteur de notre application :

import { createSelector } from '@ngrx/store';
 
export const selectCounterValue = createSelector(
 state => state.counter,
 counter => counter.value
);

Comment utiliser un sélecteur dans un composant ?

Pour utiliser un sélecteur dans un composant, vous pouvez utiliser le pipe select fourni par NgRx. Voici un exemple de comment vous pouvez utiliser le sélecteur selectCounterValue dans un composant :

import { Store } from '@ngrx/store';
import { selectCounterValue } from './counter.selectors';
 
@Component({
 selector: 'app-counter',
 template: `<div>{{ counter$ | async }}</div>`
})
export class CounterComponent {
 counter$ = this.store.select(selectCounterValue);
 
 constructor(private store: Store) {}
}

Dans cet exemple, le composant CounterComponent s'abonne à la valeur du compteur dans le store. Lorsque la valeur du compteur change, le composant sera automatiquement mis à jour avec la nouvelle valeur.

Maintenant, vous savez comment créer et utiliser des sélecteurs pour accéder à l'état dans NgRx. Les sélecteurs sont un moyen efficace de sélectionner des données spécifiques de l'état pour être utilisées dans vos composants.