POST sorğusunun emal edilmesi, Redux-da thunk istifadə edərək göndərilmiş

Biz sizlə məhsul və satıcı məlumatlarını serverdən aldıq və onları tətbiqimizdə göstərdik. Lakin thunk ilə yalnız məlumat almaq deyil, həm də məlumat göndərmək olar. Gəlin bunu necə etməyi öyrənək.

Yeni məhsulu əlavə etdikdən sonra, o bizim store-da qalır, yəni tətbiqimizin daxilində. Gəlin elə edək ki, yeni məhsul serverdə qeyd olunsun.

Gəlin serverdən başlayaq. Burada artıq GET yox, POST sorğusunu emal etməli olacağıq, çünki indi serverə saxlayacağımız məhsul məlumatları daxil olacaq.

Məhsullarla olan tətbiqimizi açaq və onun içindəki server.js faylını açaq. Orada handlers massivini tapaq və ona POST sorğusu üçün başqa bir emalçı əlavə edək. Burada biz sorğunun gövdəsini də qəbul edəcəyik, ona görə də callback-də request ötürməliyik:

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

İndi fiqurlu mötərizələrdə callback-imizin kodunu yazaq. Əvvəlcə sorğu məlumatlarını çıxaraq və xəta halında serverdən məlumatları saxlaya bilmədiyimiz cavabını və 500 statusunu göndərək:

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',
			},
		})
	}
})

Əgər məlumatlarla hər şey qaydasındadırsa, biz verilənlər bazasında sorğuda gələn id-ə görə satıcını tapacağıq və bu satıcını data-nın içinə yazacağıq (axı satıcı məlumatları da bizdə serverdə saxlanılır ;) ):

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

Sonra verilənlər bazasında bu məhsul üçün reaksiyalar obyekti yaradacağıq. Və indi, məhsul üçün lazım olan bütün sahələrə malik olaraq, bazada öz məhsulumuzu da yaradacağıq:

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

Gecikmə təyin edək və callback-imiz üçün kodun son sətirində məhsulla cavab qaytaraq:

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

Bununla serverlə tamamilə bitirdik və ona artıq qayıtmayacağıq.

Yeri gəlmişkən, başqa bir faydalı şey. export const worker = setupWorker(...handlers) sətrindən sonra aşağıdakı kodu əlavə edə bilərsiniz:

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

Və indi siz brauzerin konsolunda hər bir emalçının işləmə nəticəsini görə biləcəksiniz.

Əlbəttə ki, bizim server həqiqi deyil və əgər brauzerdə səhifəni məcburi yeniləsək, bütün yeni məhsul obyektlərimiz yox olacaq.

Tələbələrlə olan tətbiqinizi açın. Ondakı server.js faylını açın. handlers massivinə POST sorğusunun emalını əlavə edin. Bu sorğunun gövdəsində siz yeni əlavə olunmuş tələbənin məlumatlarını qəbul edəcəksiniz.

http.post üçün olan callback-inizin gövdəsində məlumatları açın və xəta halında uyğun cavab göndərin.

Əgər hər şey qaydasındadırsa, onda verilənlər bazasında alınan id-ə görə müəllimi tapın və onu məlumatlara yazın. Həmçinin verilənlər bazası əsasında yaradılmış votes obyektini də məlumatlara yazın.

Yığılmış məlumatlara əsasən yeni tələbə ilə student obyekti yaradın və onu server cavabında göndərin.