Redux lietotnes darbības apspriešana

Iepriekšējās nodarbībās mēs īstenojām visas sastāvdaļas, kas nepieciešamas Redux lietotnes darbībai. Apkoposim un īsi apskatīsim galvenos mūsu produktu lietotnes darbības posmus.

Pirmajā palaišanas reizē mūsu lietotne izvelk no store divu produktu sarakstu, izmantojot useSelector, un attēlo tos ekrānā. Ekrānā tāpat tiek attēlota forma, kurā mēs varam ievadīt jauna produkta datus. Kad lietotājs nospiež saglabāšanas pogu, tad pogas apstrādātājs nosūta darbību productAdded, kas satur jaunā produkta datus, kurus lietotājs ievadīja formā. Funkcija-reducētājs, ko mēs rakstījām produktu šķēlim, saņem šo darbību un pievieno produktu masīvam objektu ar jauno produktu. Store informē komponentus, ka glabātie state dati tika mainīti. Mūsu komponents ProductsList nolasa izmainīto masīvu, izsauc renderēšanu, kā rezultātā mēs redzam produktu sarakstā pievienoto produktu.

Tagad atvērsim Redux DevTools pārlūkprogrammā un pievienosim lietotnē vēl vienu produktu, pēc tam apskatīsim logu Log monitor, šeit mēs varam redzēt kāds mūsu state bija, kad lietotne tika palaista, un kā tad, pēc pogas nospiešanas, parādījās darbība. Mēs varam redzēt tā īpašību payload un izmaiņas globālajā stāvoklī.

Nākamajā nodaļā mēs padziļinātāk strādāsim ar datiem mūsu Redux lietotnē.