POST-päringu töötlemine, mis saadetakse Reduxis thunki abil

Me saime toodete ja müüjate andmed serverist ja kuvasime need rakenduses. Kuid thunki abil saab mitte ainult andmeid hankida, vaid ka neid saata. Uurime, kuidas seda teha.

Pärast uue toote lisamist jääb see meie store'i, see tähendab meie rakenduse sisse. Teeme nii, et uus toode salvestuks serverisse.

Alustame serverist. Siin peame töötlema mitte GET, vaid POST-päringut, kuna serverisse saabuvad nüüd toote andmed, mida me seal salvestame.

Avame oma tooterakenduse ja selles faili server.js. Leiame selles massiivi handlers ja lisame sinna veel ühe obradaja POST-päringu jaoks. Siin me peame vastu võtma ka päringu keha, seetõttu peame callbackis edastama request:

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

Nüüd kirjutame lokkis sulgudes oma callbacki koodi. Alustuseks eraldame päringu andmed ja vea korral saadame serverist vastuse, et me ei suutnud andmeid salvestada ja staatus 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',
			},
		})
	}
})

Kui andmed on korras, siis me andmebaasist leiame müüja id järgi, mis meile päringus tuli ja kirjutame selle müüja data sisse (müüja andmed on ju ka meil serveris salvestatud ;) ):

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

Järgmisena loome andmebaasi selle toote jaoks objekti reaktsioonidega. Ja nüüd, omades kõiki vajalikke välju toote jaoks, loome andmebaasi ka toote enda:

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

Seadistame viivituse ja viimases koodireas oma callbacki jaoks tagastame vastuse tootega:

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

Sellega lõpetasime serveriga täielikult ja enam sinna ei pöördu.

Muide, veel üks kasulik asi. Pärast rida export const worker = setupWorker(...handlers) võite lisada järgmise koodi:

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

Ja nüüd näete iga obradaja käivitumise tulemust brauseri konsoolis.

Muidugi on meie server ebareaalne ja kui me sunniviisiliselt brauseris lehte värskendame, siis kõik meie uued tooteobjektid kaovad.

Avage oma õpilaste rakendus. Avage selles fail server.js. Lisage massiivi handlers POST-päringu töötlus. Selle päringu kehas võtke vastu uue lisatud õpilase andmed.

Oma http.post callbacki kehas pakige andmed lahti ja vea korral saatke vastav vastus.

Kui kõik on korras, siis leidke andmebaasist õpetaja saadud id järgi ja kirjutage see andmetesse. Kirjutage ka andmetesse, andmebaasi põhjal loodud objekt votes.

Kogutud andmete põhjal looge objekt student uue õpilasega ja saatke see serveri vastuses.