Diskuse o fungování Redux aplikace

Na minulých lekcích jsme implementovali všechny součásti, potřebné pro fungování Redux aplikace. Pojďme to shrnout a krátce projít hlavní etapy fungování naší aplikace s produkty.

Při prvním spuštění naše aplikace získá ze store seznam dvou produktů pomocí useSelector a zobrazí je na obrazovce. Na obrazovce je také zobrazen formulář, kam můžeme zadat data nového produktu. Když uživatel stiskne tlačítko uložení, tak obslužná rutina tlačítka odešle akci productAdded, obsahující data nového produktu, která zadal do formuláře uživatel. Funkce-reducer, kterou jsme psali pro slic s produkty, obdrží tuto action a přidá do pole s produkty objekt s novým produktem. Store oznámí komponentám, že uložená state data byly změněny. Naše komponenta ProductsList načte změněné pole, zavolá renderování, v důsledku čeho vidíme v seznamu produktů přidaný produkt.

Nyní otevřeme Redux DevTools v prohlížeči a přidáme v aplikaci ještě jeden produkt, a poté se podíváme na záložku Log monitor, zde můžeme vidět jaký byl náš state při spuštění aplikace, a jak poté, po stisknutí tlačítka uložení, se objevila action. Můžeme vidět její vlastnost payload a změny v globálním stavu.

V následující kapitole budeme více pracovat s daty v naší Redux aplikaci.