Bespreking van de werking van een Redux-applicatie

In de vorige lessen hebben we alle componenten geïmplementeerd die nodig zijn voor de werking van een Redux-applicatie. Laten we een samenvatting maken en kort de belangrijkste fasen van de werking van onze applicatie met producten doornemen.

Bij de eerste start haalt onze applicatie uit de store een lijst met twee producten met behulp van useSelector en toont deze op het scherm. Op het scherm wordt ook een formulier getoond waar we gegevens van een nieuw product kunnen invoeren. Wanneer de gebruiker op de opslaanknop drukt, verzendt de knophandler de actie productAdded, die de gegevens van het nieuwe product bevat, die de gebruiker in het formulier heeft ingevoerd. De reducer-functie die we schreven voor de slice met producten, ontvangt deze action en voegt in de array met producten een object met het nieuwe product toe. De store informeert de componenten dat de opgeslagen state-gegevens zijn gewijzigd. Onze component ProductsList leest de gewijzigde array, roept rendering aan, met als gevolg dat we in de productlijst het toegevoegde product zien.

Laten we nu Redux DevTools in de browser openen en nog een product toevoegen in de applicatie, en vervolgens kijken naar het tabblad Log monitor. Hier kunnen we zien hoe onze state was bij het starten van de applicatie, en hoe vervolgens, na het indrukken van de opslaanknop, de action verscheen. We kunnen de eigenschap payload en de wijzigingen in de globale state zien.

In het volgende hoofdstuk zullen we grondiger werken met de gegevens in onze Redux-applicatie.