Discussion du fonctionnement d'une application Redux

Lors des leçons précédentes, nous avons mis en œuvre tous les éléments nécessaires au fonctionnement d'une application Redux. Résumons et passons brièvement en revue les étapes principales du fonctionnement de notre application avec les produits.

Lors du premier lancement, notre application récupère deux produits du store à l'aide de useSelector et les affiche à l'écran. L'écran affiche également un formulaire où nous pouvons saisir les données d'un nouveau produit. Lorsque l'utilisateur clique sur le bouton de sauvegarde, le gestionnaire du bouton envoie l'action productAdded, contenant les données du nouveau produit que l'utilisateur a saisies dans le formulaire. La fonction réductrice que nous avons écrite pour le slice des produits reçoit cette action et ajoute un objet avec le nouveau produit au tableau des produits. Le store notifie aux composants que les données du state ont été modifiées. Notre composant ProductsList lit le tableau modifié, déclenche le rendu, ce qui a pour résultat d'afficher le produit ajouté dans la liste des produits.

Ouvrons maintenant Redux DevTools dans le navigateur et ajoutons un autre produit dans l'application, puis regardons l'onglet Log monitor. Ici, nous pouvons voir quel était notre state au lancement de l'application, et comment ensuite, après avoir cliqué sur le bouton de sauvegarde, l'action est apparue. Nous pouvons voir sa propriété payload et les changements dans le state global.

Dans le chapitre suivant, nous travaillerons de manière plus approfondie avec les données dans notre application Redux.