Апрацоўка 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)
})

І цяпер вы зможаце бачыць вынік спрацоўвання кожнага апрацоўшчыка ў кансолі браўзера.

Вядома ж наш сервер несапраўдны і калі мы будзем прымусова абнаўляць старонку ў браўзеры, то ўсе нашы новыя аб'екты з прадуктамі знікнуць.

Адчынiце ваша прыкладанне з студэнтамі. Адчынiце ў ім файл server.js. Дадайце ў масіў handlers апрацоўку POST-запыту. У целе гэтага запыту вы будзеце прымаць дадзеныя новага дададзенага студэнта.

У целе callback для вашага http.post распакуйце дадзеныя і ў выпадку памылкі адпраўце адпаведны адказ.

Калі ж усё ак, то знайдзіце ў базе дадзеных выкладчыка па атрыманым id і ўпішыце яго ў дадзеныя. Упішыце таксама ў дадзеныя, створаны на аснове базы дадзеных аб'ект votes.

Па сабраных дадзеных стварыце аб'ект student з новым студэнтам і адпраўце яго ў адказе сервера.