POST kérés feldolgozása thunk használatával Redux-ban

Megkaptuk a termékek és eladók adatait a szerverről és megjelenítettük azokat az alkalmazásban. De a thunk segítségével nem csak adatokat lehet fogadni, hanem adatokat is küldeni. Nézzük meg, hogyan tehetjük ezt meg.

Miután hozzáadunk egy új terméket, az megmarad a store-ban, azaz a alkalmazásunkon belül. Tegyük úgy, hogy az új termék a szerveren is megmaradjon.

Kezdjük a szerverrel. Itt most nem GET, hanem POST kérést kell feldolgoznunk, mivel a szerverre most a termék adatai érkeznek, amelyeket ott fogunk tárolni.

Nyissuk meg a termékek alkalmazásunkat, és benne a server.js fájlt. Keressük meg benne a handlers tömböt és adjunk hozzá még egy kezelőt a POST kéréshez. Itt most a kérés testét is fogadjuk, ezért a callback-ben át kell adnunk a request-ot:

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

Most írjuk meg a callbackünk kódját a kapcsos zárójelek között. Először nyerjük ki az adatokat a kérésből és hiba esetén küldjünk a szerverről választ, hogy nem sikerült menteni az adatokat és 500 státuszt:

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',
			},
		})
	}
})

Ha minden rendben van az adatokkal, akkor az adatbázisban megkeressük az eladót az id alapján, amelyik bejött a kérésben és beírjuk ezt az eladót a data-ba (az eladó adatai ugyanis nálunk is a szerveren tárolódnak ;) ):

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

Ezután az adatbázisban létrehozunk ehhez a termékhez egy objektumot reakciókkal. És most, miután megvannak a termékhez szükséges mezők, létrehozzuk az adatbázisban magát a terméket is:

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

Tegyünk késleltetést és a callbackünk kódjának utolsó sorában adjuk vissza a választ a termékkel:

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

Ezzel teljesen befejeztük a szerverrel a munkát és többé nem térünk vissza hozzá.

Mellesleg, még egy hasznos dolog. A export const worker = setupWorker(...handlers) sor után hozzáadhatod a következő kódot:

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

És most már látni fogod az egyes kezelők lefutásának eredményét a böngésző konzoljában.

Természetesen a szerverünk nem valódi és ha kézzel frissítjük az oldalt a böngészőben, akkor minden új termék objektumunk eltűnik.

Nyisd meg a diákok alkalmazásodat. Nyisd meg benne a server.js fájlt. Add hozzá a handlers tömbhöz a POST kérés kezelését. A kérés testében fogadod az új hozzáadott diák adatait.

A http.post callback-jének testében csomagold ki az adatokat és hiba esetén küldj megfelelő választ.

Ha minden rendben, akkor keresd meg az adatbázisban az oktatót a kapott id alapján és írd be az adataiba. Írd be az adatokba, az adatbázis alapján létrehozott votes objektumot is.

Az összegyűjtött adatok alapján hozz létre egy student objektumot az új diákkal és küldd el azt a szerver válaszában.