Obdelava POST zahteve, poslane z uporabo thunk v Redux

Podatke o produktih in prodajalcih smo prejeli s strežnika in jih prikazali v aplikaciji. Vendar s pomočjo thunk ne moremo le prejemati, ampak tudi pošiljati podatke. Spoznajmo, kako to narediti.

Ko dodamo nov produkt, ta ostane v našem store, torej znotraj naše aplikacije. Naredimo tako, da se nov produkt shrani tudi na strežnik.

Začnimo s strežnikom. Tukaj bomo morali obdelati ne GET, temveč POST zahtevo, saj bodo na strežnik prihajali podatki o produktu, ki jih bomo tam shranili.

Odprimo našo aplikacijo s produkti in v njej datoteko server.js. Poiščimo v njej matriko handlers in ji dodajmo še en ročnik za POST zahtevo. Tukaj bomo sprejeli tudi telo zahteve, zato moramo v callback posredovati request:

http.post('/fakeServer/products', async ({ request }) => {})

Zdaj v zavitih oklepajih napišimo kodo našega povratnega klica. Za začetek izluščimo podatke zahteve in v primeru napake pošljimo odgovor s strežnika, da nam ni uspelo shraniti podatkov in status 500:

http.post('/fakeServer/products', async ({ request }) => {
	const data = await request.json()

	if (data.content === 'error') {
		await delay(ARTIFICIAL_DELAY_MS)
		
		return new HttpResponse('server save error', {
			status: 500,
			headers: {
				'Content-Type': 'application/json',
			},
		})
	}
})

Če so podatki v redu, bomo v bazi podatkov poiskali prodajalca po id-ju, ki nam je prišel v zahtevi, in tega prodajalca vpišimo v data (tudi podatki o prodajalcu so namreč shranjeni na strežniku ;) ):

const seller = db.seller.findFirst({
	where: { id: { equals: data.seller } },
})
data.seller = seller

Nato v bazi podatkov ustvarimo za ta produkt objekt z reakcijami. In zdaj, ko imamo vsa potrebna polja za produkt, ustvarimo v bazi tudi sam produkt:

data.reactions = db.reaction.create()
const product = db.product.create(data)

Postavimo zakasnitev in v zadnji vrstici kode za naš povratni klic vrnimo odgovor s produktom:

await delay(ARTIFICIAL_DELAY_MS)
return HttpResponse.json(serializeProduct(product))

S tem smo popolnoma končali s strežnikom in se vanj ne bomo več vrnili.

Mimogrede, še ena uporabna stvar. Za vrstico export const worker = setupWorker(...handlers) lahko dodate naslednjo kodo:

worker.listHandlers().forEach((handler) => {
	console.log(handler.info.header)
})

In zdaj boste lahko videli rezultat delovanja vsakega ročnika v brskalnikovi konzoli.

Seveda je naš strežnik nepravi in če bomo prisilno osvežili stran v brskalniku, bodo vsi naši novi objekti s produkti izginili.

Odprite vašo aplikacijo s študenti. Odprite v njej datoteko server.js. Dodajte v matriko handlers obdelavo POST zahteve. V telesu te zahteve boste sprejeli podatke o novem dodanem študentu.

V telesu callback za vaš http.post razpakirajte podatke in v primeru napake pošljite ustrezen odgovor.

Če je vse v redu, poiščite v bazi podatkov učitelja po prejetem id-ju in ga vpišite v podatke. Vpišite tudi v podatke, na osnovi baze podatkov ustvarjen objekt votes.

Iz zbranih podatkov ustvarite objekt student z novim študentom in ga pošljite v odgovoru strežnika.