Gegevensuitwisseling tussen Redux applicatie en server

Deze sectie is voor de ervaren leerlingen, die niet zijn gestopt met wat ze bereikt hebben in Redux en besloten hebben om tot het einde van deze tutorial te gaan. In de volgende twee secties behandelen we het werk van een Redux applicatie met asynchrone logica, verbinden we onze applicatie met de backend en leren we het om gegevens met elkaar uit te wisselen.

Uit eerdere secties weten we dat de werking van een Redux applicatie gebaseerd is op een synchroon mechanisme. De belangrijkste werkfasen bestaan uit het verzenden van actions wanneer een gebeurtenis plaatsvindt in de applicatie, vervolgens het bijwerken van de state in de store door de reducer-functie, het melden aan componenten van de applicatie over de statewijziging en dienovereenkomstig het weergeven van de nieuwe statewaarde in de componenten.

In het echte leven gebeurt het vaak dat een applicatie asynchrone logica nodig heeft, bijvoorbeeld bij het werken met HTTP API-verzoeken en het ophalen van gegevens van een externe server. Daarom, om ervoor te zorgen dat onze 'synchrone' Redux store kan werken met dergelijke asynchrone logica, wordt zogenaamde middleware gebruikt - software die fungeert als tussenpersoon of verbinding tussen de store van onze applicatie en, bijvoorbeeld, de server, waarmee we in dit hoofdstuk van de tutorial gaan werken.

Voor Redux zijn er veel van dergelijke middleware gemaakt, maar de meest wijdverspreide onder hen en officieel aanbevolen bij het werken van Redux applicaties met asynchrone logica is vooralsnog Redux Thunk. Deze software helpt ons om gewone functies (of thunks) te gebruiken, die asynchrone logica kunnen bevatten, zoals setTimeout, Promises, async/await, om te interageren met onze store. Wat betreft de term zelf, een thunk is code die een soort uitgesteld werk doet.

Nu we enigszins kennis hebben gemaakt met hoe we in Redux met asynchrone logica kunnen werken, kunnen we beginnen met de implementatie van deze fase in onze applicatie. We moeten ervoor zorgen dat onze applicatie kan interageren met een externe server, door gegevens van hem te ontvangen en aan hem door te geven. Met andere woorden, er wacht ons een spannend en zeer belangrijk onderwerp. Laten we beginnen.