Inleiding tot thunks in Redux

In het vorige hoofdstuk hebben we de werking van de server, database en client voor gegevensuitwisseling georganiseerd. Nu moeten we de laatste brug slaan, die ons 'synchroon' georganiseerde Redux applicatie zal helpen om te interageren met de asynchrone client, die we in de laatste les van het vorige hoofdstuk hebben gemaakt, om verzoeken te verzenden en de benodigde gegevens in het antwoord te ontvangen.

Zoals we ons herinneren uit de eerste lessen van de vorige sectie, weet Redux niets af van het werken met asynchrone logica en daarvoor zullen we thunk middleware gebruiken. Deze middleware maakt het mogelijk om met verzonden actions te werken, om in de code van onze thunk de dispatch en getState methoden van de store te gebruiken, en helpt de dispatch methode om niet alleen met gewone JS-objecten te werken, maar ook met entiteiten zoals functies en promises.

Normaal gesproken wordt een thunk-functie aangeroepen met twee argumenten: dispatch en getState (indien nodig), die kunnen worden gebruikt in het lichaam van deze functie. Met behulp daarvan kan men gewone actions verzenden. Ook kan deze worden verzonden via store.dispatch. Een voorbeeld van zo'n functie staat hieronder:

const changeColorThunk = (dispatch, getState) => {
	const colorBefore = getState()
	console.log(`Oude Kleur: ${colorBefore.color}`)
	
	dispatch(changeColor())
	
	const colorAfter = getState()
	console.log(`Nieuwe Kleur: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

Laten we nu onze applicatie met producten openen. Het eerste dat we moeten ontvangen van de server bij het opstarten van de applicatie - is de lijst met producten. Omdat thunks meestal in slice-bestanden worden geschreven, openen we het bestand productsSlice.js.

Het goede nieuws is dat we niet hoeven te sleutelen aan de installatie van Redux Thunk, omdat de functie configureStore uit RTK dit al voor ons doet. Dus laten we gewoon createAsyncThunk toevoegen aan de import in het bestand:

import { createSlice, nanoid, createAsyncThunk } from '@reduxjs/toolkit'

Laten we ook onze client importeren:

import { client } from '../../api/client'

En laten we nu met behulp van createAsyncThunk onze eerste thunk maken voor het ophalen van producten, we doen dit direct na de declaratie van het object initialState:

export const fetchProducts = createAsyncThunk()

De eerste parameter van createAsyncThunk zal een string accepteren voor het type gegenereerde action, en de tweede - een callback-functie voor de payload, die als resultaat ofwel gegevens, of een promise met een fout zal teruggeven (zie bestand client.js). In de code van de functie roepen we client.get aan en geven we het pad door, dat we op de server hebben opgegeven (bekijk de geaccepteerde parameters van http.get in server.js):

export const fetchProducts = createAsyncThunk(
	'products/fetchProducts',
	async () => {
		const response = await client.get('/fakeServer/products')
		return response.data
	}
)

Open je applicatie met studenten. Open daarin het bestand studentsSlice.js. Importeer daarin de functie createAsyncThunk voor het aanmaken van een thunk, en ook client voor het verzenden van API-verzoeken naar de server.

Direct na de declaratie van het object initialState maak je met createAsyncThunk een thunk aan genaamd fetchStudents voor het ophalen van de studentenlijst, die een GET-verzoek zal verzenden naar adres /fakeServer/students, zoals opgegeven in je bestand server.js, en zal terugkeren met response.data, zoals getoond in de lesmaterialen. Geef als eerste parameter aan createAsyncThunk de string students/fetchStudents op voor het action type.