Sending data from the server via GET request in Redux

Så vi har en database med data. Den første ting, vi vil gøre, når vi starter vores Redux applikation, er at hente produktdataene fra serveren. For at gøre dette skal vi sende en GET-forespørgsel fra vores applikation. Lad os håndtere den på serversiden.

Åbn vores produktapplikation, og i den filen server.js. For at arbejde med HTTP-forespørgsler skal vi importere flere værktøjer fra msw i filen, lad os gøre det:

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

Lad os også straks justere for virkeligheden, dvs. mulige forsinkelser i netværket. Lad værdien af vores kunstige forsinkelse være 2 sekunder, så vi kan se, hvordan dataene loades. Lad os skrive den efter const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

Og nu i slutningen af filen før eksporten af workeren, lad os oprette et array til API request handlers:

export const handlers = []

Og derefter i de kantede parenteser skriver vi den første handler til at fange GET-forespørgslen for produkter:

export const handlers = [http.get()]

Som den første parameter til http.get sender vi en falsk adresse, for eksempel '/fakeServer/products', og som den anden en asynkron callback:

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

Nu skriver vi koden for denne callback. Med dens hjælp vil vi hente alle produkter fra databasen. Her vil vi også bruge funktionen serializeProduct, hvis kode vi skrev i sidste lektion. Lad os sende den til map. Derefter laver vi en forsinkelse (som om netværket er langsomt) og returnerer i response objekterne med produktdata som 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)
	}),
]

Og til sidst. Vi har skrevet den første handler for vores worker, lad os sende denne worker arrayet handlers. For at gøre dette retter vi den sidste linje kode i filen til:

export const worker = setupWorker(...handlers)

Åbn din applikation med studerende, og i den filen server.js. Importer de angivne værktøjer fra msw i filen. Efter at have studeret materialet i denne lektion, skal du oprette et tomt array af handlers til at fange forespørgsler. Skriv i det koden for handleren til GET-forespørgslen for studerende. Som sti skal du have '/fakeServer/students'.

Glem ikke at sende handler-arrayet handlers til workeren i slutningen af filen.