Appearance
Comment utiliser selector sur NgRx ? ​
Pour utiliser un selector
dans NgRx, vous devez d'abord l'implémenter en tant que fonction qui prend l'état de l'application en entrée et qui retourne les données sélectionnées. Ensuite, vous pouvez utiliser cette fonction dans votre composant en injectant le Store
de NgRx et en appelant la méthode select
sur celui-ci, en passant en paramètre le selector
que vous avez créé. Vous pouvez ensuite vous abonner à la valeur retournée par le selector
pour mettre à jour les données affichées dans votre composant en fonction des changements dans l'état de l'application.
Exemple ​
Arborescence des fichiers de l'exemple
src/
app/
app.state.ts // DĂ©finit le type AppState
user.selectors.ts // Définit les selectors pour les données de l'utilisateur
my.component.ts // Implémente MyComponent
my.component.html // Contient la vue de MyComponent
...
AppState
est le type de l'état de l'application géré par NgRx. Il contient toutes les données de l'application qui sont gérées par le store NgRx. La structure exacte de AppState
dépend de l'application et des données qu'elle gère, mais elle peut ressembler à ceci :
ts
export interface AppState {
user: User;
todos: Todo[];
settings: Settings;
// ... d'autres propriétés de l'état de l'application
}
Dans cet exemple, AppState
contient trois propriétés : user
, todos
et settings
. Chacune de ces propriétés contient des données spécifiques à une partie de l'application, comme les données de l'utilisateur, les tâches à faire et les paramètres de l'application.
Ensuite, voici un exemple d'implémentation d'un selector dans NgRx :
ts
import { createSelector } from '@ngrx/store';
import { AppState } from './app.state';
// SĂ©lectionne l'Ă©tat de l'application
const selectAppState = (state: AppState) => state;
// Crée un selector qui sélectionne la propriété `user` de l'état de l'application
const selectUser = createSelector(
selectAppState,
(state: AppState) => state.user
);
Voici comment vous pouvez utiliser ce selector dans un composant :
ts
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { AppState } from './app.state';
import { selectUser } from './user.selectors'; // <-- Ajout de l'import ici
@Component({
// ...
})
export class MyComponent {
user$: Observable<User> = this.store.select(selectUser)
constructor(private store: Store<AppState>) {}
}
Dans ce code, l'observable user$
contiendra la valeur de la propriété user
de l'état de l'application, et sera mis à jour en fonction des changements dans cet état. Vous pouvez ensuite utiliser cet observable dans votre composant pour afficher les données de l'utilisateur ou pour déclencher des actions en fonction de ces données.