Werking van een Redux applicatie

Nu we zijn uitgerust met de terminologie, kunnen we kort de belangrijkste fasen bekijken van de werking van een applicatie op Redux, die je in de toekomst zult gaan maken.

De werking van de applicatie verloopt volgens het idee van unidirectionele gegevensstroom, zoals we eerder al hebben genoemd.

In de initialisatiefase (bij de eerste start van de applicatie) wordt met behulp van de root reducer de store aangemaakt. De store roept deze reducer slechts één keer aan en schrijft de door hem teruggegeven waarde als de initiële state. Tijdens de primaire render gebruiken de componenten van de applicatie de huidige state, opgeslagen in de store. Ook abonneren zij zich op updates van de store, om onmiddellijk op de hoogte te zijn van een verandering in de state.

Tijdens de verdere werking van de applicatie gebeurt het volgende. Stel, een gebruiker heeft met de muis op een knop geklikt. In dat geval wordt met behulp van code een action gevormd, die naar de store wordt gestuurd. De store start opnieuw de reducer met de daarin opgeslagen state en de ontvangen action. Als resultaat wordt de gewijzigde state waarde opgeslagen als de nieuwe. Ook informeert de store de geabonneerde componenten over de wijziging dat er veranderingen hebben plaatsgevonden. Op hun beurt kijken de componenten of de voor hen noodzakelijke delen van de state zijn gewijzigd. Ten slotte, als er wijzigingen hebben plaatsgevonden, dan roept de component een render aan om de nieuwe gegevens weer te geven.