Skicka data från servern via GET-förfrågan i Redux

Så vi har en databas med data. Det första vi kommer att göra när vi startar vår Redux applikation är att hämta produktdata från servern. För att göra detta måste vi från vår applikation skicka en GET-förfrågan. Låt oss hantera den på serversidan.

Öppna vår produktapplikation, och i den filen server.js. För att kunna arbeta med HTTP-förfrågningar behöver vi importera några verktyg från msw till filen, låt oss göra det:

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

Låt oss också omedelbart justera för verkligheten, det vill säga möjliga nätverksfördröjningar. Låt vårt artificiella fördröjningsvärde vara 2 sekunder så att vi kan se hur datan laddas. Låt oss skriva det efter const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

Och nu, i slutet av filen före exporten av workern, skapar vi en array för API- hanterare av förfrågningar:

export const handlers = []

Och sedan inom hakparenteserna skriver vi den första hanteraren för att avlyssna GET-förfrågan för produkter:

export const handlers = [http.get()]

Som första parameter till http.get skickar vi en falsk adress, till exempel '/fakeServer/products', och som andra en asynkron callback:

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

Nu skriver vi koden för denna callback. Med dess hjälp kommer vi att extrahera alla produkter från databasen. Här kommer vi också att använda funktionen serializeProduct, vars kod vi skrev förra lektionen. Låt oss skicka den till map. Sedan skapar vi en fördröjning (som om nätverket är segt) och returnerar i response objekten 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)
	}),
]

Och sist. Vi har skrivit den första hanteraren för vår worker, låt oss skicka arrayen handlers till denna worker. För att göra detta korrigerar vi den sista kodraden i filen till:

export const worker = setupWorker(...handlers)

Öppna din studentapplikation, och i den filen server.js. Importera de angivna verktygen från msw till filen. Efter att ha studerat materialet i denna lektion, skapa en tom array med hanterare för avlyssning av förfrågningar. Skriv i den koden för en hanterare för GET-förfrågan om studenter. Låt sökvägen vara '/fakeServer/students'.

I slutet av filen, glöm inte att skicka arrayen med hanterare handlers till workern.