Diskussion af Redux-applikationens funktion

På de foregående lektioner implementerede vi alle komponenter, der er nødvendige for, at en Redux-applikation kan fungere. Lad os opsummere og kort gennemgå hovedtrinnene i vores applikations funktion med produkter.

Ved første opstart henter vores applikation en liste med to produkter fra store ved hjælp af useSelector og viser dem på skærmen. På skærmen vises også en formular, hvor vi kan indtaste data for et nyt produkt. Når brugeren trykker på gem-knappen, sender knappens eventhandler en action productAdded, som indeholder dataene for det nye produkt, som brugeren har indtastet i formularen. Reducer-funktionen, som vi skrev for product-slice'et, modtager denne action og tilføjer et objekt med det nye produkt til arrayet med produkter. Store fortæller komponenterne, at de lagrede state-data er blevet ændret. Vores komponent ProductsList læser det ændrede array, udløser rendering, og som et resultat ser vi det tilføjede produkt i produktlisten.

Lad os nu åbne Redux DevTools i browseren og tilføje endnu et produkt i applikationen, og derefter se på fanen Log monitor. Her kan vi se, hvor vores state var ved applikationens start, og hvordan der derefter, efter tryk på gem-knappen, opstod en action. Vi kan se dens egenskab payload og ændringerne i den globale state.

I det næste kapitel vil vi arbejde mere grundigt med data i vores Redux-applikation.