Jelle vertelt

In deze code snippet gebruik ik Redux Saga om asynchrone acties die ik op mijn json-server uitvoer gegarandeerd in een correcte volgorde te laten verlopen.

Over dit fragment

In de context van het TeamAwesome project moet de gebruiker bij het openen van de applicatie zijn bestaande timesheets kunnen zien, een nieuwe timesheet kunnen toevoegen en een bestaande timesheet kunnen verwijderen. De timesheets staan opgeslagen op een lokale json-server die met behulp van drie verschillende fetch() REST API calls wordt aangesproken.

Deze database verzoeken hebben, afhankelijk van hun grootte en beschikbaarheid van de server, een variabele tijd nodig om afgehandeld te kunnen worden. Bij dit soort acties loop je het risico dat vervolgacties eerder worden uitgevoerd dan bedoeld. In vorige versies maakte ik gebruik van promises en callbacks waarvan de flow erg snel onduidelijk werd: 'callback hell'.

Door gebruik te maken van Redux Sagas houd ik mijn asynchrone acties gescheiden, testbaar en is de volgorde van mijn acties glashelder. In het fragment waakt de generator functie watchTimesheetEntries over 3 verschillende acties die gedispatcht kunnen worden en vuurt de respectievelijke generatorfunctie af. De actie met het type POST_TIMESHEET_ENTRY gaat nu zowel in de Saga als de Redux Reducer af.

Over dit fragment

Door middel van de generator functie onPostTimesheetEntry wordt het dispatchen van de actie POST_TIMESHEET_ENTRY_SUCCES pas uitgevoerd wanneer de eerste yield volledig is afgerond.