POST հարցման մշակում, որը ուղարկված է thunk-ի միջոցով Redux-ում

Մենք ձեզ հետ ստացանք ապրանքների և վաճառողների տվյալները սերվերից և արտացոլեցինք դրանք հավելվածում: Սակայն thunk-ի օգնությամբ կարելի է ոչ միայն ստանալ, այլև ուղարկել տվյալներ: Եկեք պարզենք, թե ինչպես դա անել:

Այն բանից հետո, երբ մենք ավելացնում ենք նոր ապրանք, այն մնում է մեր store-ում, այսինքն՝ մեր հավելվածի ներսում: Եկեք անենք, որ նոր ապրանքը պահպանվի սերվերում:

Սկսենք սերվերից: Այստեղ մենք արդեն պետք է մշակենք ոչ թե GET, այլ POST հարցում, քանի որ սերվեր այժմ կուղարկվեն ապրանքի տվյալները, որոնք մենք այնտեղ կպահպանենք:

Բացենք մեր ապրանքներով հավելվածը, և դրա ներսում server.js ֆայլը: Գտնենք դրա մեջ handlers զանգվածը և ավելացնենք դրա մեջ ևս մեկ մշակիչ POST հարցման համար: Այստեղ մենք կընդունենք նաև հարցման մարմինը, հետևաբար callback-ում մենք պետք է փոխանցենք request:

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

Այժմ ձևավոր փակագծերում գրենք կոդ մեր callback-ի: Սկզբից դուրս բերենք տվյալները հարցման և սխալի դեպքում ուղարկենք սերվերից պատասխան, որ մենք չկարողացանք պահպանել տվյալները և 500 status:

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-ի callback-ի մարմնում ապափաթեթավորեք տվյալները և սխալի դեպքում ուղարկեք համապատասխան պատասխան:

Եթե ամեն ինչ կարգին է, ապա տվյալների բազայում գտեք դասախոսին ըստ ստացված id-ի և գրեք նրան տվյալների մեջ: Գրեք նաև տվյալների մեջ, տվյալների բազայի հիման վրա ստեղծված votes օբյեկտը:

Հավաքված տվյալների հիման վրա ստեղծեք student օբյեկտ նոր ուսանողով և ուղարկեք այն սերվերի պատասխանում: