Обработка на POST заявка, изпратена с помощта на thunk в Redux

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

След като добавим нов продукт, той остава в нашия store, тоест вътре в нашето приложение. Нека направим така, че новият продукт да се запазва на сървъра.

Нека започнем със сървъра. Тук вече ще трябва да обработим не GET, а POST заявка, тъй като на сървъра сега ще пристигат данни за продукта, които ще запазваме там.

Нека отворим нашето приложение с продукти, а в него файла server.js. Да намерим в него масива handlers и да добавим в него още един обработчик за 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)
})

И сега ще можете да виждате резултата от задействането на всеки обработчик в конзолата на браузъра.

Разбира се, нашият сървър не е истински и ако принудително опресняваме страницата в браузъра, всички наши нови обекти с продукти ще изчезнат.

Отворете вашето приложение със студенти. Отворете в него файла server.js. Добавете в масива handlers обработка на POST заявка. В тялото на тази заявка ще приемате данните за новодобавен студент.

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

Ако всичко е наред, тогава намерете в базата данни преподавателя по полученото id и го запишете в данните. Запишете също в данните, създаден на базата на базата данни обект votes.

По събраните данни създайте обект student с нов студент и го изпратете в отговора на сървъра.