Gegevens verzenden vanaf de server via GET-verzoek in Redux

We hebben dus een database met gegevens. Het eerste wat we gaan doen bij het opstarten van onze Redux applicatie - is gegevens over producten ophalen van de server. Hiervoor moeten we vanuit onze applicatie een GET-verzoek sturen. Laten we dit aan de serverkant afhandelen.

Open onze applicatie met producten, en daarin het bestand server.js. Om met HTTP-verzoeken te kunnen werken, moeten we een paar instrumenten uit msw importeren in het bestand, laten we dit doen:

import { http, HttpResponse, delay } from 'msw'

Laten we ook meteen aanpassingen maken voor de realiteit, dat wil zeggen mogelijke vertragingen in het netwerk. Laat de waarde van onze kunstmatige vertraging 2 seconden zijn, zodat we kunnen zien hoe de gegevens worden geladen. Laten we dit schrijven na const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

En nu, aan het einde van het bestand, vóór het exporteren van de worker, maken we een array voor API verzoekhandlers:

export const handlers = []

En vervolgens schrijven we tussen de vierkante haakjes de eerste handler voor het onderscheppen van het GET-verzoek voor producten:

export const handlers = [http.get()]

Als eerste parameter voor http.get geven we een nepadres door, bijvoorbeeld '/fakeServer/products', en als tweede een asynchrone callback:

export const handlers = [http.get('/fakeServer/products', async () => {})]

Laten we nu de code voor deze callback schrijven. Met behulp hiervan halen we alle producten uit de database. Hier gebruiken we ook de functie serializeProduct, waarvan we de code in de vorige les hebben geschreven. Laten we deze in map doorgeven. Vervolgens introduceren we een vertraging (alsof het netwerk traag is) en retourneren we in response de objecten met productgegevens als JSON:

export const handlers = [
	http.get('/fakeServer/products', async () => {
		const products = db.product.getAll().map(serializeProduct)
		await delay(ARTIFICIAL_DELAY_MS)
		return HttpResponse.json(products)
	}),
]

En als laatste. We hebben de eerste handler geschreven voor onze worker, laten we deze worker de array handlers doorgeven. Hiervoor passen we de laatste regel code in het bestand aan op:

export const worker = setupWorker(...handlers)

Open je applicatie met studenten, en daarin het bestand server.js. Importeer de genoemde instrumenten uit msw in het bestand. Bestudeer de stof van deze les en maak een lege array van handlers voor het onderscheppen van verzoeken. Schrijf daarin de code voor de handler van het GET-verzoek voor studenten. Laat het pad '/fakeServer/students' zijn.

Vergeet aan het einde van het bestand niet om de array van handlers handlers aan de worker door te geven.