POST сўровни Redux да thunk орқали юборилганда ишлов бериш

Биз сиз билан маҳсулотлар ва сотувчилар ҳақида маълумотларни сервердан олдик ва уларни иловага чиқардик. Лекин thunk ёрдамида фақат маълумот олишгина эмас, балки маълумот юбориш ҳам мумкин. Буни қандай қилишни биламиз.

Янги маҳсулотни қўшгандан сўнг, у бизнинг store-да, яъни иловамизнинг ичида қолади. Келинг, янги маҳсулот серверда сақлансини таъминлаймиз.

Келинг, сервердан бошлаймиз. Бу ерда бизга GET эмас, балки POST-сўровни ишлов бериш керак бўлади, чунки серверга енди маҳсулот маълумотлари келади, ва биз уларни ўша ерда сақлаймиз.

Маҳсулотлар билан илованимизни ochамиз, ундаги файл server.js ни ochамиз. Унинг ичидаги massivni handlers топамиз ва унга яна бита POST-сўров учун ишловчи қўшамиз. Бу ерда биз сўров bodyсини ҳам қабул қиламиз, шунинг учун callback да биз request ни ўтказамиз:

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

Энди jingalak qavslar ichida бизнинг callback имизнинг кодини ёзамиз. Бошлаш учун сўров маълумотларини оламиз ва хato юз берганда сервердан жавоб қайтарамиз, биз маълумотларни сақлай олмадик ва статус 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',
			},
		})
	}
})

Agar ma'lumotlar bilan hammasi joyida bo'lsa, unda biz bazada ma'lumotlarдан сотувчини id бўйича топамиз, керак бизга сўровда келган ва ўша сотувчини data га киритамиз (сотувчи маълумотлари ҳам бизнинг серверда сақланади ;) ):

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

Keyin ma'lumotlar bazasida бу маҳсулот учун реакциялар объектини яратамиз. Ва энди, маҳсулот учун зарур барча майдонларга эга бўлиб, базада ўзимизнинг маҳсулотимизни яратамиз:

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

Кечиктириш қўйамиз ва коднинг oxirgi сатрида бизнинг callback имиз учун маҳсулот билан жавоб қайтарамиз:

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

Бу билан биз сервер билан тугатдик ва унга яна қайтмаймиз.

Kстати, яна бир фойдали нарса. Satrdan keyin export const worker = setupWorker(...handlers) сиз куйидаги кодни қўша оласиз:

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

Ва энди сиз ҳар бир ишловчининг ишлаш натижасини браузер консолида кўра оласиз.

Албатта бизнинг серверимиз ҳақиқий эмас ва агар биз браузерда саҳифани мажбуран янгиласак, бизнинг барча янги маҳсулот объектлари йўқолади.

Сизнинг талабалар билан иловангизни ochинг. Ундаги файл server.js ни ochинг. Massivга handlers POST-сўровни ишлов беришни қўшинг. Ушбу сўров bodyсида сиз янги қўшилган талабанинг маълумотларини қабул қиласиз.

Сизнинг http.post учун callback bodyсида маълумотларни чиқаринг ва хato юз берганда мос жавобни юборинг.

Agar hammasi joyida bo'lsa, unda ma'lumotlar bazasidan ўқитувчини олинган id бўйича топинг ва уни маълумотларга киритинг. Шунингдек, маълумотларга, база маълумотлари асосида яратилган объектни votes киритинг.

Тўпланган маълумотлар асосида объект яратинг student янги талаба билан ва уни сервер жавобида юборинг.