📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structurĂ© en trois niveaux : dĂ©butant, intermĂ©diaire et avancĂ©
  • 3) traite des pratiques les plus rĂ©centes d'Angular, comme les signaux, les vues diffĂ©rĂ©es, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

Comment utiliser selector sur NgRx ? ​

Les sélecteurs sont définis dans un fichier séparé, généralement nommé users.selectors.ts. Ils permettent de récupérer des informations spécifiques de l'état des utilisateurs. Pour notre exemple, nous allons créer trois sélecteurs : un pour accéder à l'état des utilisateurs, un pour accéder à la liste des utilisateurs, et un pour vérifier l'état de chargement.

1. Créer un sélecteur pour l'état des utilisateurs ​

Nous créons un sélecteur de fonctionnalité pour accéder à l'état des utilisateurs. Ce sélecteur de fonctionnalité est utilisé comme base pour les autres sélecteurs.

typescript
// Sélecteur pour accéder à l'état des utilisateurs
export const selectUsersState = createFeatureSelector<UsersState>('users');

3. créer des sélecteurs spécifiques ​

Nous utilisons createSelector pour créer des sélecteurs spécifiques basés sur le sélecteur de fonctionnalité.

  • Ce sĂ©lecteur extrait la liste des utilisateurs de l'Ă©tat.
typescript
// Sélecteur pour accéder à la liste des utilisateurs
export const selectUsersList = createSelector(
  selectUsersState,
  (state: UsersState) => state.usersList 
);
  • Ce sĂ©lecteur extrait l'Ă©tat de chargement de l'Ă©tat.
typescript
// Sélecteur pour accéder à l'état de chargement
export const selectUsersLoading = createSelector(
  selectUsersState, 
  (state: UsersState) => state.loading 
);
  1. createFeatureSelector : Cette fonction crée un sélecteur de fonctionnalité qui permet d'accéder à l'état des utilisateurs dans le store global.
  2. createSelector : Cette fonction crée des sélecteurs spécifiques basés sur le sélecteur de fonctionnalité. Elle prend le sélecteur de fonctionnalité comme premier argument, puis une fonction de projection qui retourne la partie spécifique de l'état.

Utilisation des sélecteurs dans les composants ​

Les sélecteurs sont utilisés dans les composants pour obtenir les données nécessaires de l'état. Voici un exemple d'utilisation dans un composant Angular :

typescript
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { User } from './user';
import { selectUsersList, selectUsersLoading } from './state/users.selectors';
import { loadUsers } from './state/users.actions';

@Component({
  selector: 'app-users',
  template: `
    @let loading = loading$ | async; <!-- depuis Angular 18.1 -->
    @let usersList = usersList$ | async; <!-- depuis Angular 18.1 -->

    @if (loading) {
      <div>Chargement en cours...</div>
    }
    @else {
      <ul>
        @for (user of usersList ; track user.id) {
          <li>{{ user.name }}</li>
        }
      </ul>
    }
  
  `,
  standalone: true
})
export class UsersComponent implements OnInit {
  private store = inject(Store)
  usersList$: Observable<User[]> = this.store.select(selectUsersList);
  loading$: Observable<boolean> = this.store.select(selectUsersLoading); 

  ngOnInit(): void {
    this.store.dispatch(loadUsers());
  }
}

Points Ă  retenir

  • Les sĂ©lecteurs sont utilisĂ©s pour extraire des parties spĂ©cifiques de l'Ă©tat du store.
  • createFeatureSelector crĂ©e un sĂ©lecteur de fonctionnalitĂ© pour accĂ©der Ă  une partie spĂ©cifique de l'Ă©tat global.
  • createSelector crĂ©e des sĂ©lecteurs spĂ©cifiques basĂ©s sur le sĂ©lecteur de fonctionnalitĂ©.
  • Les sĂ©lecteurs permettent une gestion optimisĂ©e et typĂ©e de l'Ă©tat dans vos composants.

Bonnes pratiques

  • Utilisez des noms de sĂ©lecteurs descriptifs pour clarifier leur rĂ´le.
  • Combinez les sĂ©lecteurs pour crĂ©er des sĂ©lecteurs complexes si nĂ©cessaire.
  • Centralisez la dĂ©finition des sĂ©lecteurs dans des fichiers sĂ©parĂ©s pour une meilleure organisation.
  • Utilisez les sĂ©lecteurs dans les composants pour minimiser la logique d'Ă©tat directement dans les composants.

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !