Angular

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