Leçon 3 / 20

Choisir la source de vérité de chaque donnée

12 min React — architecture, performance et accessibilité Gratuit

Objectif : Affecter chaque donnée du tableau de bord à un état local, dérivé ou partagé sans la dupliquer.

Quand un total affiché ne correspond plus aux dépenses de la liste, le problème vient souvent de deux valeurs conservées séparément alors qu’elles décrivent la même information. Ce décalage devient plus probable dès qu’une dépense est ajoutée, supprimée ou modifiée. Vous allez décider où chaque donnée doit vivre et quelles valeurs doivent plutôt être recalculées.

La source de vérité est l’unique endroit où une information mutable est détenue et mise à jour. Pour le tableau de bord, les dépenses et les catégories sont des données métier utilisées dans plusieurs zones : saisie, liste et récapitulatif. Elles doivent donc avoir une source commune plutôt que des copies indépendantes dans chacun de ces composants.

Le choix dépend de l’usage, pas seulement du type de la valeur. Une donnée utilisée par une seule interaction peut appartenir à cette zone ; une donnée dont plusieurs zones ont besoin doit être partagée. La leçon « Cartographier les responsabilités de l’application » a déjà établi les composants qui présentent ces zones ; vous pouvez maintenant leur associer les données sans changer cette organisation.

Un état détenu contient une valeur qui peut évoluer indépendamment : par exemple, les dépenses enregistrées, les catégories disponibles ou le mois choisi pour le récapitulatif. Un état dérivé, lui, est obtenu à partir d’une ou plusieurs de ces valeurs : total mensuel, nombre de dépenses, totaux par catégorie ou liste correspondant aux filtres. Il n’a pas besoin d’une deuxième source de stockage si vous pouvez le recalculer à partir des données d’origine.

DonnéeNatureSource recommandée
Dépenses enregistréesÉtat métier partagéUne source commune aux zones qui les utilisent
Catégories disponiblesÉtat métier partagéUne source commune, notamment pour la saisie et l’affichage
Mois sélectionnéÉtat détenu par le récapitulatifLa zone qui permet de le choisir
Catégorie sélectionnée pour le filtreÉtat détenu par les filtresLa zone de filtrage
Total mensuelÉtat dérivéDépenses et mois sélectionné
Liste filtréeÉtat dérivéDépenses et critères de filtre

Cette répartition évite d’enregistrer, par exemple, à la fois les dépenses et leur total mensuel. Si l’une des dépenses change, une copie du total risque de rester ancienne. En recalculant le total à partir des dépenses et du mois choisi, vous n’avez qu’une seule représentation des dépenses et le résultat suit leurs changements.

Un état dupliqué est une valeur conservée séparément alors qu’elle peut être tirée d’une autre source déjà détenue. Stocker à la fois les dépenses et une liste filtrée, ou les dépenses et un total actualisé à chaque action, impose de maintenir leur cohérence. Chaque chemin de mise à jour devient une occasion d’oublier une copie.

Avant de créer un état, posez trois questions : cette valeur est-elle saisie ou calculée ? Combien de zones doivent la lire ou la modifier ? Peut-elle être reconstruite à partir d’une valeur déjà détenue ? Si elle est calculable, ne la dupliquez pas ; si elle doit être partagée, prévoyez une source commune ; si elle ne concerne qu’une interaction, gardez sa responsabilité près de cette zone.

À ce stade, il s’agit d’une décision d’architecture, pas encore d’une implémentation. Les types métier déjà définis dans « Définir les types du domaine en TypeScript strict » décrivent les dépenses et les catégories ; ils ne dictent pas à eux seuls où leurs valeurs sont stockées. La prochaine leçon isolera les opérations de données derrière un service, sans modifier les décisions de source de vérité prises ici.

  • Attribuez une source unique à chaque donnée mutable.
  • Partagez les dépenses et catégories lorsqu’elles sont utilisées dans plusieurs zones.
  • Calculez les totaux et les listes filtrées à partir de leurs sources, au lieu de les stocker en parallèle.
  • Gardez près de l’interaction les valeurs qui ne concernent qu’une seule zone.

Envie d'aller plus loin ?

Les cours Enovatic sont gratuits et le resteront. Si vous cherchez un accompagnement encadré, nos formations professionnelles sont animées par les mêmes formateurs.