Duomenų siuntimas iš serverio naudojant GET užklausą Redux

Taigi, mes turime duomenų bazę. Pirmas dalykas, kurį darysime paleisdami savo Redux programą, yra gauti produktų duomenis iš serverio. Tam mums reikia iš mūsų programos išsiųsti GET užklausą. Pažiūrėkime, kaip ją apdoroti serverio pusėje.

Atidarykime savo produktų programą, o joje failą server.js. Kad galėtume dirbti su HTTP užklausomis, mums reikia importuoti į failą kelis įrankius iš msw, darykime tai:

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

Taip pat iš karto atliksime pataisymus, atsižvelgdami į realybę, tai yra, galimus delsos tinkle. Tegul mūsų dirbtinės delsos reikšmė yra 2 sekundės, kad matytume, kaip įkeliami duomenys. Parašykime ją po const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

O dabar failo pabaigoje prieš eksportuodami workerį, sukurkime masyvą API užklausų tvarkytuvams:

export const handlers = []

Ir tada laužtiniuose skliaustuose parašykime pirmąjį tvarkytuvą GET užklausai, skirtai produktams gauti:

export const handlers = [http.get()]

Pirmuoju http.get parametru perduosime kokių nors netikrą adresą, pavyzdžiui, '/fakeServer/products', o antruoju - asinchroninį callback:

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

Dabar parašykime šio callback kodą. Su jo pagalba mes ištrauksime visus produktus iš DB. Čia mes taip pat panaudosime funkciją serializeProduct, kurios kodą parašėme praėjusioje pamokoje. Perduokime jį į map. Tada sukurkime delsimą (tarsi tinklas lėtai veikia) ir grąžinkime response objektus su produktų duomenimis JSON formatu:

export const handlers = [
	http.get('/fakeServer/products', async () => {
		const products = db.product.getAll().map(serializeProduct)
		await delay(ARTIFICIAL_DELAY_MS)
		return HttpResponse.json(products)
	}),
]

Ir paskutinis dalykas. Mes parašėme pirmąjį handlerį mūsų workeriui, dabar perduokime šiam workeriui masyvą handlers. Tam pakeiskime paskutinę failo kodo eilutę į:

export const worker = setupWorker(...handlers)

Atidarykite savo studentų programą, o joje failą server.js. Importuokite į failą nurodytus įrankius iš msw. Išstudijavę šios pamokos medžiagą, sukurkite tuščią užklausų tvarkytuvų masyvą. Parašykite jame kodą GET užklausos, skirtos studentams gauti, tvarkytuvui. Kaip kelią naudokite '/fakeServer/students'.

Failo pabaigoje nepamirškite perduoti tvarkytuvų masyvą handlers workeriui.