Razprava o delovanju Redux aplikacije

V prejšnjih lekcijah smo implementirali vse sestavne dele, potrebne za delovanje Redux aplikacije. Povzemimo in na kratko ponovimo glavne faze delovanja naše aplikacije s produkti.

Ob prvem zagonu naša aplikacija pridobi iz store seznam dveh produktov s pomočjo useSelector in jih prikaže na zaslonu. Na zaslonu je prav tako prikazan obrazec, kamor lahko vnesemo podatke novega produkta. Ko uporabnik pritisne gumb za shranjevanje, obravnavalec gumba pošlje akcijo productAdded, ki vsebuje podatke novega produkta, ki jih je v obrazec vnesel uporabnik. Funkcija-reduktor, ki smo jo napisali za slice s produkti, prejme to akcijo in doda v matriko s produkti objekt z novim produktom. Store sporoči komponentam, da so bili shranjeni podatki state spremenjeni. Naša komponenta ProductsList prebere spremenjeno matriko, pokliče renderiranje, kar povzroči, da v seznamu produktov vidimo dodani produkt.

Zdaj odprimo Redux DevTools v brskalniku in dodajmo v aplikaciji še en produkt, nato pa poglejmo zavihek Log monitor, tukaj lahko vidimo kakšen je bil naš state ob zagonu aplikacije, in kako se je nato, po pritisku na gumb za shranjevanje, pojavila akcija. Lahko vidimo njeno lastnost payload in spremembe v globalnem stanju.

V naslednjem poglavju bomo temeljiteje delali s podatki v naši Redux aplikaciji.