Mettre à jour l’état de manière immuable
Appliquez des mises à jour immuables à l’état des signaux
Mettre à jour l’état de manière immuable est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.
Pourquoi l’immutabilité
Les signaux détectent les changements par référence. Si vous modifiez directement un tableau ou un objet, la référence reste la même et les signaux computed() dépendants peuvent ne pas être recalculés. Produisez toujours une nouvelle référence.
Le piège de la mutation
Ajouter un élément à un tableau existant le modifie sans changer sa référence. Évitez cette pratique.
// BAD: mutates in place, reference unchanged
this._items.update(list => { list.push(item); return list; });L’opérateur spread pour les tableaux
Créez un nouveau tableau avec l’opérateur spread afin que la référence change et que les utilisateurs soient réévalués.
// GOOD: new array reference
this._items.update(list => [...list, item]);Supprimer des éléments
Utilisez filter(), qui renvoie un tout nouveau tableau en laissant l’original intact.
removeItem(id: string) {
this._items.update(list => list.filter(i => i.id !== id));
}Mettre à jour un élément
Utilisez map() pour renvoyer un nouveau tableau, en copiant l’objet correspondant dans une nouvelle copie afin que la référence interne change également.
markDone(id: string) {
this._items.update(list =>
list.map(i => i.id === id ? { ...i, done: true } : i));
}L’opérateur spread pour les objets
Pour l’état d’un objet, copiez l’objet précédent avec spread et remplacez les champs modifiés. Les objets imbriqués nécessitent eux aussi leur propre copie spread.
private _profile = signal({ name: '', address: { city: '' } });
setCity(city: string) {
this._profile.update(p => ({ ...p, address: { ...p.address, city } }));
}set avec une valeur nouvelle
Lorsque vous remplacez entièrement l’état, set() avec un nouvel objet est naturellement immuable, car vous fournissez une nouvelle référence.
reset() {
this._profile.set({ name: '', address: { city: '' } });
}Pourquoi computed en dépend
Comme les modèles de lecture calculés dépendent de la référence du signal, les mises à jour immuables garantissent leur recalcul. Une mutation qui conserve la même référence de tableau peut laisser silencieusement les totaux et les filtres obsolètes.
Modèles d’assistance
Extrayez de petites fonctions auxiliaires pures pour les transformations courantes, afin de garder les méthodes du magasin lisibles et cohérentes.
const upsert = (list: Item[], item: Item) =>
list.some(i => i.id === item.id)
? list.map(i => i.id === item.id ? item : i)
: [...list, item];
save(item: Item) { this._items.update(l => upsert(l, item)); }Attention à l’imbrication profonde
Un état profondément imbriqué nécessite de nombreuses copies spread. Si les mises à jour deviennent pénibles, aplatissez la structure de l’état ou divisez-la en plusieurs signaux afin que chaque mise à jour ne touche qu’une petite portion.
L’immutabilité facilite le débogage
Comme chaque mise à jour produit une nouvelle référence, vous pouvez comparer des instantanés au fil du temps, journaliser l’état précédent et l’état suivant, et raisonner sur les changements sans craindre des modifications cachées sur place.
Vérification rapide
Vérifiez votre compréhension des mises à jour immuables des signaux.
Récapitulatif
Vous avez appris les modèles de mise à jour immuables : la déstructuration avec l’opérateur de propagation pour les tableaux et les objets, map/filter pour les modifications et les suppressions, de nouvelles références via set, ainsi que la raison pour laquelle l’égalité des références rend l’immutabilité essentielle à une réactivité correcte.
Questions Fréquemment Posées
La leçon « Mettre à jour l’état de manière immuable » est-elle gratuite ?
Oui — le texte complet de « Mettre à jour l’état de manière immuable » 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 « Mettre à jour l’état de manière immuable » ?
Appliquez des mises à jour immuables à l’état des signaux 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 3 sur 4.
Combien de temps prend la leçon « Mettre à jour l’état de manière immuable » ?
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
- Magasins de signaux dans les services
- Dériver l’état avec computed
- Mettre à jour l’état de manière immuable
- Relier les signaux et RxJS