Sending data from the server via GET request in Redux

Så vi har en database med data. Den første tingen vi skal gjøre når vi starter Redux-applikasjonen vår er å hente produktdataene fra serveren. For å gjøre dette må vi sende en GET-forespørsel fra applikasjonen vår. La oss håndtere den på serversiden.

La oss åpne produktapplikasjonen vår, og i den filen server.js. For å kunne arbeide med HTTP-forespørsler, må vi importere flere verktøy fra msw i filen, la oss gjøre dette:

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

La oss også justere for virkeligheten, dvs. mulige forsinkelser i nettverket. La verdien av vår kunstige forsinkelse være 2 sekunder, slik at vi kan se hvordan dataene lastes inn. La oss skrive den etter const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

Og nå, på slutten av filen før eksporten av worker-en, la oss opprette en matrise for API- behandlere for forespørsler:

export const handlers = []

Og deretter i hakeparentesene skriver vi den første behandleren for å fange opp GET-forespørselen for produkter:

export const handlers = [http.get()]

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

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

La oss nå skrive koden for denne callback-funksjonen. Med dens hjelp vil vi hente alle produktene fra databasen. Her vil vi også bruke funksjonen serializeProduct, hvis kode vi skrev forrige leksjon. La oss sende den til map. Deretter lager vi en forsinkelse (som om nettverket er tregt) og returnerer i response objekter 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 slutt. Vi har skreven den første handler-en for worker-en vår, la oss sende denne worker-en matrisen handlers. For å gjøre dette endrer vi den siste linjen i filen til:

export const worker = setupWorker(...handlers)

Åpne studentapplikasjonen din, og i den filen server.js. Importer de angitte verktøyene fra msw i filen. Etter å ha studert materialet i denne leksjonen, opprett en tom matrise med behandlere for å fange opp forespørsler. Skriv i den koden for behandleren for GET-forespørselen for studenter. Som sti, la det være '/fakeServer/students'.

På slutten av filen, ikke glem å sende matrisen med behandlere handlers til worker-en.