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:

api/server.jsimport { 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:

api/server.jsconst ARTIFICIAL_DELAY_MS = 2000

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

api/server.jsexport const handlers = []

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

api/server.jsexport 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:

api/server.jsexport 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:

api/server.jsexport 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:

api/server.jsexport const worker = setupWorker(...handlers)