Débogage du store Store:débogage

Notre store évolue dans le temps, passant d’un état à l’autre. Lors de l’élaboration d’une application, il peut être pertinent d’utiliser des outils permettant de tracer ces changements, mais aussi de comparer les versions de l’état.

Des outils de débogage ont été créés à cet effet, pour Redux notamment, et peuvent être utilisés par Fluxor. Voyons comment les utiliser sur notre implémentation pour permettre le suivi.

1. Installation de l’extension Redux DevTools

Tout d’abord, l’outil principal dans le navigateur permettant de traquer les changements d’état ne fonctionne que sur un navigateur qui utilise Chromium comme base (donc Chrome ou Edge Chromium) ou sur Firefox. L’extension en question s’appelle Redux DevTools. Il nous faut procéder à l’installation de cette extension sur notre navigateur de travail. Redux DevTools est normalement visible dans le coin supérieur droit sous la forme d’une icône qui ressemble à un radar :

images/05EI02.PNG

Icône de l’extension Redux DevTools sous Google Chrome

Cette icône prend des couleurs et offre des fonctionnalités avancées dès lors que l’extension détecte un lien avec un store, ce que nous allons configurer.

Si on ouvre notre application avec l’extension installée, l’icône ne réagit...

Pour consulter la suite, découvrez le livre suivant :
couv_EIBLAZ.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Implémentation du store
Suivant
Nouveautés .NET 5