Razgovor o radu Redux aplikacije

Na prethodnim lekcijama smo implementirali sve komponente potrebne za rad Redux aplikacije. Hajde da sumiramo i ukratko prođemo kroz osnovne faze rada naše aplikacije sa proizvodima.

Prilikom prvog pokretanja, naša aplikacija preuzima iz store-a listu od dva proizvoda pomoću useSelector i prikazuje ih na ekranu. Na ekranu se takođe prikazuje forma u koju možemo uneti podatke novog proizvoda. Kada korisnik pritisne dugme za čuvanje, handler dugmeta šalje akciju productAdded, koja sadrži podatke novog proizvoda koje je korisnik uneo u formu. Funkcija-reducer, koju smo pisali za slice sa proizvodima, prima ovu akciju i dodaje u niz sa proizvodima objekat sa novim proizvodom. Store obaveštava komponente da su sačuvani state podaci promenjeni. Naša komponenta ProductsList čita izmenjeni niz, pokreće renderovanje, usled čega vidimo u listi proizvoda dodat proizvod.

Sada ćemo otvoriti Redux DevTools u pretraživaču i dodati u aplikaciji još jedan proizvod, a zatim pogledati karticu Log monitor, ovde možemo videti kakav je bio naš state pri pokretanju aplikacije, i kako se zatim, nakon pritiska na dugme za čuvanje, pojavila akcija. Možemo videti njeno svojstvo payload i promene u globalnom state-u.

U narednom poglavlju ćemo temeljnije poraditi sa podacima u našoj Redux aplikaciji.