Përpunimi i kërkesës POST të dërguar duke përdorur thunk në Redux

Ne kemi marrë të dhënat e produkteve dhe shitësve nga serveri dhe i kemi shfaqur në aplikacion. Por me ndihmën e thunk mund të merren jo vetëm, por edhe të dërgohen të dhëna. Le të mësojmë se si ta bëjmë këtë.

Pasi që ne shtojmë një produkt të ri, ai mbetet në store-n tonë, domethënë brenda aplikacionit tonë. Le ta bëjmë në mënyrë që produkti i ri të ruhet në server.

Le të fillojmë nga serveri. Këtu na duhet të përpunojmë jo një kërkesë GET, por një kërkesë POST, pasi në server tani do të vinin të dhënat e produktit, të cilat ne do t'i ruanim atje.

Le të hapim aplikacionin tonë me produktet, dhe në të skedarin server.js. Le të gjejmë në të grupin handlers dhe t'i shtojmë atij një përpunues tjetër për kërkesën POST. Këtu ne do të pranojmë edhe trupin e kërkesës, prandaj në callback ne duhet të kalojmë request:

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

Tani në kllapat e formatit të thikës le të shkruajmë kodin të callback-it tonë. Për fillim le të nxjerrim të dhënat e kërkesës dhe në rast gabimi le të dërgojmë nga serveri përgjigjen se nuk mundët të ruanim të dhënat dhe statusin 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',
			},
		})
	}
})

Nëse me të dhënat gjithçka është në rregull, atëherë ne në bazën e të dhënave do të gjejmë shitësin sipas id, i cili na erdhi në kërkesë dhe do të shkruajmë këtë shitës në data (të dhënat e shitësit në fund të fundit janë edhe te ne të ruajtura në server ;) ):

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

Më pas në bazën e të dhënave le të krijojmë për këtë produkt një objekt me reaksione. Dhe tani, duke pasur të gjitha fushat e nevojshme për produktin, le të krijojmë në bazë edhe vetë produktin:

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

Le të vendosim një vonesë dhe në rreshtin e fundit të kodit për callback-in tonë le të kthejmë përgjigjen me produktin:

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

Me këtë ne kemi përfunduar plotësisht me serverin dhe nuk do të kthehemi më aty.

Meqë ra fjala, një gjë tjetër e dobishme. Pas rreshtit export const worker = setupWorker(...handlers) ju mund të shtoni kodin e mëposhtëm:

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

Dhe tani ju do të mund të shihni rezultatin e aktivizimit të çdo përpunuesi në konsolën e shfletuesit.

Sigurisht që serveri ynë nuk është i vërtetë dhe nëse ne do të rifreskonim me forcë faqen në shfletues, atëherë të gjithë objektet tona të reja me produkte do të zhdukeshin.

Hapni aplikacionin tuaj me studentët. Hapni në të skedarin server.js. Shtoni në grupin handlers përpunimin e kërkesës POST. Në trupin e kësaj kërkese ju do të pranoni të dhënat e studentit të ri të shtuar.

Në trupin e callback-it për http.post tuaj shpërndani të dhënat dhe në rast gabimi dërgoni përgjigjen përkatëse.

Nëse gjithçka është në rregull, atëherë gjeni në bazën e të dhënave profesorin sipas id-së së marrë dhe shkruani atë në të dhënat. Shkruani gjithashtu në të dhënat, objektin e krijuar në bazë të bazës së të dhënave votes.

Sipas të dhënave të mbledhura krijojeni objektin student me studentin e ri dhe dërgoni atë në përgjigjen e serverit.