Spracovanie POST požiadavky odoslanej pomocou thunk v Reduxe

Získali sme údaje o produktoch a predajcoch zo servera a zobrazili sme ich v aplikácii. Ale pomocou thunk je možné nielen získavať, ale aj odosielať údaje. Poďme zistiť, ako to urobiť.

Potom, čo pridáme nový produkt, ostáva nám v store, teda vo vnútri našej aplikácie. Urobme to tak, aby sa nový produkt uložil na serveri.

Začnime so serverom. Tu už budeme musieť spracovať nie GET, ale POST požiadavku, pretože na server teraz budú prichádzať údaje o produkte, ktoré tam budeme ukladať.

Otvorme našu aplikáciu s produktmi a v nej súbor server.js. Nájdeme v ňom pole handlers a pridajme do neho ďalší spracovateľ pre POST požiadavku. Tu budeme prijímať aj telo požiadavky, preto v callback musíme odovzdať request:

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

Teraz do zložených zátvoriek napíšme kód nášho callbacku. Na začiatok extrahujme údaje požiadavky a v prípade chyby odošlime zo servera odpoveď, že sa nám nepodarilo uložiť údaje a 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',
			},
		})
	}
})

Ak sú údaje v poriadku, tak v databáze nájdeme predajcu podľa id, ktoré nám prišlo v požiadavke a vpíšeme tohto predajcu do data (údaje o predajcovi sa predsa tiež ukladajú na serveri ;) ):

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

Ďalej v databáze vytvoríme pre tento produkt objekt s reakciami. A teraz, keď máme všetky potrebné polia pre produkt, vytvorme v databáze aj samotný produkt:

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

Nastavme oneskorenie a v poslednom riadku kódu pre náš callback vráťme odpoveď s produktom:

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

Tým sme úplne skončili so serverom a viac sa k nemu nevrátime.

Mimochodom, ešte jedna užitočná vec. Za riadkom export const worker = setupWorker(...handlers) môžete pridať nasledujúci kód:

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

A teraz môžete vidieť výsledok spustenia každého spracovateľa v konzole prehliadača.

Samozrejme, náš server nie je skutočný a ak budeme nútene obnovovať stránku v prehliadači, všetky naše nové objekty s produktmi zmiznú.

Otvorte svoju aplikáciu so študentmi. Otvorte v nej súbor server.js. Pridajte do poľa handlers spracovanie POST požiadavky. V tele tejto požiadavky budete prijímať údaje nového pridaného študenta.

V tele callbacku pre váš http.post rozbaľte údaje a v prípade chyby odošlite príslušnú odpoveď.

Ak je všetko v poriadku, nájdite v databáze učiteľa podľa získaného id a vpíšte ho do údajov. Vpíšte tiež do údajov, objekt votes vytvorený na základe databázy.

Zo zhromaždených údajov vytvorte objekt student s novým študentom a odošlite ho v odpovedi servera.