Pošiljanje podatkov s strežnika z GET zahtevko v Redux

Torej imamo podatkovno bazo. Prva stvar, ki jo bomo naredili ob zagonu naše Redux aplikacije, je pridobivanje podatkov o produktih s strežnika. Za to moramo iz naše aplikacije poslati GET zahtevo. Obravnavajmo jo na strani strežnika.

Odprimo našo aplikacijo s produkti, in v njej datoteko server.js. Da bi lahko delali s HTTP zahtevami, moramo uvoziti v datoteko več instrumentov iz msw, naredimo to:

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

Takoj tudi prilagodimo na realnost, to je morebitne zamude v omrežju. Naj bo vrednost naše umetne zamude 2 sekundi, da bomo videli, kako se podatki nalagajo. Zapišimo jo po const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

In zdaj na koncu datoteke pred izvozom workerja pripravimo seznam za API obdelovalnike zahtev:

export const handlers = []

In nato v oglatih oklepajih zapišimo prvi obdelovalnik za prestrezanje GET zahteve za produkte:

export const handlers = [http.get()]

Kot prvi parameter za http.get bomo podali nek lažen naslov, na primer '/fakeServer/products', in kot drugega asinhroni callback:

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

Zdaj zapišimo kodo za ta callback. Z njeno pomočjo bomo pridobili vse produkte iz baze podatkov. Tukaj bomo uporabili tudi funkcijo serializeProduct, katere kodo smo napisali v prejšnji lekciji. Podajmo jo v map. Nato naredimo zamudo (kot da omrežje počasuje) in vrnimo v response objekte s podatki produktov v obliki 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)
	}),
]

In zadnje. Napisali smo prvi handler za našega workerja, podajmo temu workerju seznam handlers. Za to popravimo zadnjo vrstico kode v datoteki na:

export const worker = setupWorker(...handlers)

Odprite vašo aplikacijo s študenti, in v njej datoteko server.js. Uvozite v datoteko navedene instrumente iz msw. Po preučitvi gradiva te lekcije ustvarite prazen seznam obdelovalnikov za prestavljanje zahtev. Zapišite vanj kodo za obdelovalnik GET zahteve študentov. Kot pot naj bo pri vas '/fakeServer/students'.

Na koncu datoteke ne pozabite podati seznama obdelovalnikov handlers workerju.