Обработка на POST барање, испратено со помош на thunk во Redux

Ние ги добивме податоците за производите и продавачите од серверот и ги прикажавме во апликацијата. Но со thunk може не само да се добијат, туку и да се испратат податоци. Ајде да дознаеме како се прави тоа.

Откако ќе додадеме нов производ, тој останува кај нас во store, односно внатре во нашата апликација. Ајде да направиме така што новиот производ ќе се зачувува на серверот.

Ајде да започнеме од серверот. Овде веќе ќе треба да обработиме не GET, туку POST-барање, бидејќи на серверот сега ќе пристигнуваат податоци за производот, кои ние ќе ги зачувуваме таму.

Да ја отвориме нашата апликација со производи, а во неа датотеката server.js. Да го најдеме во неа низата handlers и да додадеме уште еден handler за POST-барање. Овде ние ќе прифатиме и тело на барањето, па затоа во callback мора да го пренесеме request:

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

Сега во кадравите загради да го напишеме кодот на нашиот callback. За почеток да ги извлечеме податоците од барањето и во случај на грешка да испратиме од серверот одговор дека не успеавме да ги зачуваме податоците и статус 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',
			},
		})
	}
})

Ако податоците се во ред, тогаш во базата на податоци ќе го најдеме продавачот по id, кој ни дојде во барањето и ќе го впишеме тој продавач во data (податоците за продавачот секако и кај нас се чуваат на серверот ;) ):

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

Потоа во базата на податоци ќе креираме за овој производ објект со реакции. И сега, имајќи ги сите потребни полиња за производот, ќе креираме во базата и самиот производ:

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

Ќе поставиме одложување и во последниот ред код за нашиот callback ќе вратиме одговор со производот:

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

Со ова целосно завршивме со серверот и повеќе нема да се враќаме на него.

Патем, уште една корисна работа. После редот export const worker = setupWorker(...handlers) можете да го додадете следниот код:

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

И сега ќе можете да го гледате резултатот од активирањето на секој handler во конзолата на прелистувачот.

Се разбира нашиот сервер не е вистински и ако ја принудно освежиме страницата во прелистувачот, сите наши нови објекти со производи ќе исчезнат.

Отворете ја вашата апликација со студенти. Отворете ја во неа датотеката server.js. Додадете во низата handlers обработка на POST-барање. Во телото на ова барање ќе примате податоци за новододадениот студент.

Во телото на callback за вашиот http.post распакувајте ги податоците и во случај на грешка испратете соодветен одговор.

Ако сè е во ред, тогаш пронајдете во базата на податоци го предавачот по добиениот id и впишете го него во податоците. Впишете го исто така во податоците, создадениот врз основа на базата на податоци објект votes.

Од собраните податоци креирајте објект student со нов студент и испратете го во одговорот од серверот.