Обработка POST захтева, послатог помоћу thunk у Redux-у

Ми смо добили податке о производима и продавцима са сервера и приказали их у апликацији. Али помоћу thunk-а можемо не само примати, већ и слати податке. Хајде да сазнамо како се то ради.

Након што додамо нови производ, он остаје у нашем store-у, односно унутар наше апликације. Хајде да направимо да нови производ буде сачуван на серверу.

Почнимо од сервера. Овде ћемо морати да обрадимо не GET, већ POST захтев, пошто ће на сервер сада стизати подаци о производу, које ћемо и тамо сачувати.

Отворимо нашу апликацију са производима, а у њој фајл server.js. Нађимо у њему низ handlers и додајмо у њега још један хендлер за POST захтев. Овде ћемо примати и тело захтева, па у callback морамо проследити request:

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

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

Поставимо кашњење и у последњем реду кода за наш колбек вратимо одговор са производом:

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

Овим смо у потпуности завршили са сервером и више се нећемо враћати на њега.

Узгред, још једна корисна ствар. После реда export const worker = setupWorker(...handlers) можете додати следећи код:

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

И сада ћете моћи да видите резултат рада сваког хендлера у конзоли прегледача.

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

Отворите вашу апликацију са студентима. Отворите у њој фајл server.js. Додајте у низ handlers обраду POST захтева. У телу тог захтева ћете примати податке о новом додатом студенту.

У телу колбека за ваш http.post распакујте податке и у случају грешке пошаљите одговарајући одговор.

Ако је све у реду, онда пронађите у бази података предавача по примљеном id-у и уписати га у податке. Упишите такође у податке, објекат votes креиран на основу базе података.

На основу сакупљених података креирајте објекат student са новим студентом и пошаљите га у одговору сервера.