Redux'те thunk аркылуу жөнөтүлгөн POST суроонун иштетилиши

Биз сиз менен серверден продукт жана сатуучулардын маалыматтарын алдык жана колдонмогоа чыгардык. Бирок 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 суроосунун иштетилишин кошуңуз. Бул суроонун денесинде сиз кошулган жаңы окуучунун маалыматтарын кабыл аласыз.

Сиздин http.post үчүн callback'тин денесинде маалыматты бөлүп алыңыз жана ката кеткен учурда тиешелүү жоопту жөнөтүңүз.

Эгерде баары жакшы болсо, анда базадан келген id боюнча окутуучуну таап, аны маалыматка киргизиңиз. Ошондой эле базага негизделген түзүлгөн votes объектин дагы маалыматка киргизиңиз.

Жыйналган маалыматтар боюнча жаңы окуучу менен student объектин түзүп, аны сервердин жообуна жөнөтүңүз.