État calculé et méthodes
Ajoutez un état dérivé et des méthodes de mise à jour
État calculé et méthodes est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.
Au-delà de l’état brut
Un store utile expose des valeurs dérivées et un comportement. SignalStore les ajoute avec withComputed pour les modèles de lecture et withMethods pour les actions.
withComputed
withComputed reçoit les signaux actuels du store et renvoie un objet de signaux computed(). Ceux-ci mémorisent leur résultat et se mettent automatiquement à jour comme toute valeur calculée.
import { signalStore, withState, withComputed } from '@ngrx/signals';
import { computed } from '@angular/core';
export const CartStore = signalStore(
withState({ items: [] as Item[] }),
withComputed(({ items }) => ({
count: computed(() => items().length),
total: computed(() => items().reduce((s, i) => s + i.price, 0))
}))
);Lire les valeurs calculées
Les membres calculés apparaissent sur le store comme ceux de l’état. Lisez store.count() et store.total() dans les modèles ; ils se mettent à jour lorsque items change.
template: 'Items: {{ store.count() }} — {{ store.total() }}'withMethods
withMethods reçoit le store et renvoie des méthodes nommées. À l’intérieur, utilisez patchState pour mettre à jour l’état de manière immuable.
import { withMethods, patchState } from '@ngrx/signals';
withMethods((store) => ({
add(item: Item) {
patchState(store, (s) => ({ items: [...s.items, item] }));
},
clear() {
patchState(store, { items: [] });
}
}))Les méthodes lisent aussi l’état
Dans une méthode, vous pouvez lire les signaux actuels depuis l’argument du store afin de prendre des décisions avant d’appliquer une mise à jour.
withMethods((store) => ({
toggle(id: string) {
const exists = store.items().some(i => i.id === id);
if (!exists) return;
patchState(store, (s) => ({
items: s.items.map(i => i.id === id ? { ...i, on: !i.on } : i)
}));
}
}))Les méthodes peuvent utiliser computed
Comme withComputed s’exécute avant withMethods, les méthodes peuvent lire les membres calculés déjà exposés par le store.
withMethods((store) => ({
checkout() {
if (store.total() === 0) return;
// proceed...
}
}))Injecter des dépendances
withMethods s’exécute dans un contexte d’injection ; appelez donc inject() à l’intérieur pour récupérer des services comme HttpClient ou un routeur.
withMethods((store, http = inject(HttpClient)) => ({
load() {
http.get<Item[]>('/api/items')
.subscribe(items => patchState(store, { items }));
}
}))Ordre des fonctionnalités
Les fonctionnalités se composent de haut en bas. Placez d’abord withState, puis withComputed (qui lit l’état), et enfin withMethods (qui lit l’état et les valeurs calculées). Inverser cet ordre provoque des erreurs de type.
Encapsulation
Les composants appellent store.add(item) ou lisent store.total(). Ils n’appellent jamais patchState directement, ce qui maintient toute la logique de mutation dans le store.
Valeurs calculées pures, méthodes à effets
Gardez les fonctions withComputed pures (elles doivent uniquement dériver des valeurs). Placez les effets secondaires, comme les appels HTTP ou la navigation, dans withMethods.
Vérifier les méthodes
Les SignalStores sont des classes injectables. Dans vos vérifications, fournissez le store via TestBed, appelez une méthode, puis vérifiez l’état et les signaux calculés de manière synchrone.
const store = TestBed.inject(CartStore);
store.add({ id: '1', price: 10 });
expect(store.count()).toBe(1);
expect(store.total()).toBe(10);Vérification rapide
Vérifiez votre compréhension des valeurs calculées et des méthodes.
Récapitulatif
Vous avez enrichi un SignalStore avec withComputed pour créer des modèles de lecture mémorisés et avec withMethods pour encapsuler des actions qui utilisent patchState et des services injectés. L’ordre des fonctionnalités garantit que chaque couche peut lire celles qui la précèdent.
Questions Fréquemment Posées
La leçon « État calculé et méthodes » est-elle gratuite ?
Oui — le texte complet de « État calculé et méthodes » 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 « État calculé et méthodes » ?
Ajoutez un état dérivé et des méthodes de mise à jour 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 2 sur 4.
Combien de temps prend la leçon « État calculé et méthodes » ?
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
- Créer un SignalStore
- État calculé et méthodes
- rxMethod pour les opérations asynchrones
- Entités et fonctionnalités personnalisées