Diskusia o fungovaní aplikácie Redux

Na predchádzajúcich lekciách sme implementovali všetky zložky potrebné pre fungovanie aplikácie Redux. Zhrňme si stručne prechod cez hlavné etapy práce našej aplikácie s produktmi.

Pri prvom spustení naša aplikácia načítava z store zoznam dvoch produktov pomocou useSelector a zobrazuje ich na obrazovke. Na obrazovke sa tiež zobrazuje formulár, kam môžeme zadať údaje nového produktu. Keď používateľ klikne na tlačidlo uloženia, tak obslužná rutina tlačidla odošle akciu productAdded, obsahujúcu údaje nového produktu, ktoré použivateľ zadal do formulára. Reduktor, ktorý sme písali pre slice s produktmi, prijme túto akciu a pridá do poľa s produktmi objekt s novým produktom. Store informuje komponenty, že uložené údaje state boli zmenené. Náš komponent ProductsList načíta zmenené pole, spustí renderovanie, v dôsledku čoho vidíme v zozname produktov pridaný produkt.

Teraz otvorme Redux DevTools v prehliadači a pridajme v aplikácii ešte jeden produkt, a potom sa pozrime na kartu Log monitor, tu môžeme vidieť aký bol náš state pri spustení aplikácie, a ako potom, po kliknutí na tlačidlo uloženia, sa objavila akcia. Môžeme vidieť jej vlastnosť payload a zmeny v globálnom stave.

V nasledujúcej kapitole budeme dôkladnejšie pracovať s údajmi v našej aplikácii Redux.