Diskusjon av Redux-applikasjonens arbeid

På de foregående leksjonene implementerte vi alle komponenter nødvendige for at en Redux-applikasjon skal fungere. La oss oppsummere og kort gå gjennom hovedtrinnene i hvordan applikasjonen vår med produkter fungerer.

Ved første oppstart henter applikasjonen vår en liste med to produkter fra store ved hjelp av useSelector og viser dem på skjermen. På skjermen vises det også et skjema der vi kan fylle inn data for et nytt produkt. Når brukeren trykker på lagre-knappen, sender knappens eventhandler ut en action productAdded som inneholder dataene for det nye produktet som brukeren fylte inn i skjemaet. Reducer-funksjonen som vi skrev for produkt-slicet, mottar denne actionen og legger til et objekt med det nye produktet i produkt-arrayet. Store varsler komponentene om at de lagrede state-dataene er blitt endret. Vår ProductsList-komponent leser det endrede arrayet, utløser en re-rendering, og som et resultat ser vi det lagde til produktet i produktlisten.

La oss nå åpne Redux DevTools i nettleseren og legge til enda et produkt i applikasjonen, og deretter se på fanen Log monitor. Her kan vi se hva state vår var da applikasjonen startet, og hvordan det deretter, etter å ha trykket på lagre-knappen, dukket opp en action. Vi kan se dens payload-egenskap og endringene i den globale staten.

I neste kapittel vil vi jobbe mer grundig med dataene i vår Redux-applikasjon.