Dyskusja na temat działania aplikacji Redux

Na poprzednich lekcjach zaimplementowaliśmy wszystkie składniki niezbędne do działania aplikacji Redux. Podsumujmy i krótko przejdźmy przez główne etapy działania naszej aplikacji z produktami.

Podczas pierwszego uruchomienia nasza aplikacja pobiera ze store listę dwóch produktów za pomocą useSelector i wyświetla je na ekranie. Na ekranie wyświetlany jest również formularz, gdzie możemy wprowadzić dane nowego produktu. Gdy użytkownik naciska przycisk zapisu, handler przycisku wysyła akcję productAdded, zawierającą dane nowego produktu, które użytkownik wprowadził w formularzu. Funkcja-reduktor, którą napisaliśmy dla slajdu z produktami, otrzymuje tę akcję i dodaje do tablicy z produktami obiekt z nowym produktem. Store informuje komponenty, że przechowywane dane state zostały zmienione. Nasz komponent ProductsList odczytuje zmodyfikowaną tablicę, wywołuje renderowanie, w wyniku czego widzimy na liście produktów dodany produkt.

Teraz otwórzmy Redux DevTools w przeglądarce i dodajmy w aplikacji jeszcze jeden produkt, a następnie spójrzmy na zakładkę Log monitor, tutaj możemy zobaczyć jaki był nasz state przy uruchomieniu aplikacji, i jak następnie, po naciśnięciu przycisku zapisu, pojawiła się akcja. Możemy zobaczyć jej właściwość payload i zmiany w globalnym stanie.

W następnym rozdziale będziemy bardziej solidnie pracować z danymi w naszej aplikacji Redux.