POST so‘rovni qayta ishlash, Redux-da thunk yordamida yuborilgan

Biz siz bilan mahsulotlar va sotuvchilar ma’lumotlarini serverdan oldik va ularni ilovada ko‘rsatdik. Ammo thunk yordamida nafaqat ma’lumotlarni olish, balki yuborish ham mumkin. Buni qanday qilishni bilib olaylik.

Yangi mahsulot qo‘shganimizdan so‘ng, u bizning store-imizda, ya’ni ilovamiz ichida qoladi. Keling, yangi mahsulot serverni saqlanishi uchun qilaylik.

Keling, serverdan boshlaylik. Bu yerda endi GET emas, balki POST-so‘rovni qayta ishlashimiz kerak bo‘ladi, chunki serverga endi mahsulot ma’lumotlari keladi, va biz ularni saqlaymiz.

Mahsulotlar bilan ilovamizni ochamiz, va unda server.js faylini topamiz. Unda handlers massivini topib, unga POST-so‘rov uchun yana bir handler qo‘shamiz. Bu yerda biz so‘rov tana qismini ham qabul qilamiz, shuning uchun callback ichiga request ni uzatishimiz kerak:

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

Endi jingalak qavslar ichiga callbackimizning kodini yozamiz. Boshlanish uchun so‘rov ma’lumotlarini ajratib olamiz va xatolik yuz berganda serverdan ma’lumotlarni saqlay olmadik degan javobni va 500 statusini yuboramiz:

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

Agar ma’lumotlar bilan hammasi joyida bo‘lsa, ma’lumotlar bazasida bizga so‘rov bilan kelgan id bo‘yicha sotuvchini topamiz va shu sotuvchini data ga qo‘shamiz (axir sotuvchi ma’lumotlari ham serverda saqlanadi ;) ):

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

Keyin ma’lumotlar bazasida bu mahsulot uchun reaksiyalar obyektini yaratamiz. Va endi, mahsulot uchun kerakli barcha maydonlarga ega bo‘lib, ma’lumotlar bazasida o‘zimiz ham mahsulotni yaratamiz:

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

Kechikishni qo‘yamiz va callbackimiz uchun kodning oxirgi qatorida mahsulot bilan javob qaytaramiz:

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

Shu bilan biz server bilan butunlay ishimizni tugatdik va unga boshqa qaytmaymiz.

Aytgancha, yana bir foydali narsa. export const worker = setupWorker(...handlers) qatoridan keyin siz quyidagi kodni qo‘shishingiz mumkin:

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

Va endi siz brauzer konsolida har bir handler ishlash natijasini ko‘rishingiz mumkin.

Albatta bizning serverimiz haqiqiy emas va agar biz brauzerdagi sahifani majburiy yangilasak, barcha yangi mahsulot obyektlari yo‘qoladi.

Talabalar bilan ilovangizni oching. Undagi server.js faylini oching. handlers massiviga POST-so‘rovni qayta ishlashni qo‘shing. Bu so‘rov tana qismida siz yangi qo‘shilgan talabaning ma’lumotlarini qabul qilasiz.

http.post uchun callbackingiz tana qismida ma’lumotlarni oching va xatolik yuz berganda mos javobni yuboring.

Agar hammasi yaxshi bo‘lsa, ma’lumotlar bazasidan o‘qituvchini olingan id bo‘yicha toping va uni ma’lumotlarga qo‘shing. Shuningdek, ma’lumotlarga, ma’lumotlar bazasi asosida yaratilgan votes obyektini ham qo‘shing.

Yig‘ilgan ma’lumotlar asosida student obyektini yangi talaba bilan yarating va uni server javobida qaytaring.