0Pricing
Angular Academy · Leçon

Entités et fonctionnalités personnalisées

Gérez des collections avec withEntities

Entités et fonctionnalités personnalisées est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Gérer les collections

Les listes d’enregistrements (tâches, utilisateurs, produits) sont si courantes que NgRx fournit withEntities pour les gérer avec un état normalisé et des fonctions de mise à jour prêtes à l’emploi.

withEntities

withEntities stocke les éléments indexés par identifiant dans un entityMap, ainsi que dans un tableau ids ordonné, et expose un signal calculé entities contenant la liste.

import { withEntities } from '@ngrx/signals/entities';

export const TodoStore = signalStore(
  withEntities<Todo>()
);
// store.entities() -> Todo[]

Mises à jour des entités

Utilisez les utilitaires de mise à jour avec patchState : setAllEntities, addEntity, updateEntity et removeEntity. Ils maintiennent la cohérence de la carte et de l’ordre des identifiants.

import { addEntity, removeEntity, updateEntity } from '@ngrx/signals/entities';

patchState(store, addEntity({ id: '1', title: 'A', done: false }));
patchState(store, updateEntity({ id: '1', changes: { done: true } }));
patchState(store, removeEntity('1'));

Charger une collection

Remplacez toute la collection après une récupération avec setAllEntities, qui normalise le tableau dans la carte et les identifiants.

import { setAllEntities } from '@ngrx/signals/entities';

load: rxMethod<void>(pipe(
  switchMap(() => api.getTodos()),
  tap(todos => patchState(store, setAllEntities(todos)))
))

idKey personnalisé

Si l’identifiant de votre entité n’est pas id, transmettez un sélecteur. Le store indexe alors la carte à l’aide de ce champ.

withEntities<User>(); // expects user.id
// custom key:
patchState(store, addEntity(user, { selectId: (u: User) => u.uuid }));

Dériver des données des entités

Combinez withEntities avec withComputed pour créer des modèles de lecture filtrés ou comptés à partir de la collection.

withComputed(({ entities }) => ({
  remaining: computed(() => entities().filter(t => !t.done).length)
}))

Qu’est-ce qu’une fonctionnalité personnalisée ?

Une fonctionnalité personnalisée est un ensemble réutilisable d’état, de valeurs calculées et de méthodes que vous pouvez intégrer à plusieurs stores. Créez-en une avec signalStoreFeature.

import { signalStoreFeature, withState } from '@ngrx/signals';

export function withLoading() {
  return signalStoreFeature(
    withState({ loading: false })
  );
}

Réutiliser une fonctionnalité

Ajoutez votre fonctionnalité personnalisée à n’importe quel store, comme une fonctionnalité intégrée. C’est ainsi que vous partagez des préoccupations transversales, comme les indicateurs de chargement ou la pagination.

export const TodoStore = signalStore(
  withLoading(),
  withEntities<Todo>()
);
// store.loading() now exists

Fonctionnalités avec méthodes

Une fonctionnalité personnalisée peut inclure withMethods pour exposer un comportement réutilisable, comme des utilitaires setLoading.

export function withLoading() {
  return signalStoreFeature(
    withState({ loading: false }),
    withMethods((store) => ({
      setLoading(loading: boolean) { patchState(store, { loading }); }
    }))
  );
}

Composabilité

Comme les fonctionnalités sont simplement des fonctions qui renvoient des descripteurs de fonctionnalités, vous pouvez en empiler plusieurs : withLoading(), withEntities() et un état propre à l’application, le tout fusionné dans un store fortement typé.

Fonctionnalités génériques

Rendez les fonctionnalités génériques afin qu’elles fonctionnent avec différents types d’entités. Les paramètres de type sont propagés, afin que les consommateurs conservent une sécurité de typage complète.

export function withSelected<T>() {
  return signalStoreFeature(
    withState({ selected: null as T | null })
  );
}

Vérification rapide

Vérifiez vos connaissances sur les entités et les fonctionnalités.

Récapitulatif

Vous avez géré des collections avec withEntities (map normalisée, fonctions d’aide pour les mises à jour et modèles de lecture dérivés) et créé des ensembles réutilisables et génériques avec signalStoreFeature pour partager l’état, les valeurs calculées et les méthodes entre plusieurs magasins.

Questions Fréquemment Posées

La leçon « Entités et fonctionnalités personnalisées » est-elle gratuite ?

Oui — le texte complet de « Entités et fonctionnalités personnalisées » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Entités et fonctionnalités personnalisées » ?

Gérez des collections avec withEntities Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Entités et fonctionnalités personnalisées » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Créer un SignalStore
  2. État calculé et méthodes
  3. rxMethod pour les opérations asynchrones
  4. Entités et fonctionnalités personnalisées
← Retour à Angular Academy