Verwerking van 'n POST-versoek gestuur met behulp van thunk in Redux

Ons het die data van produkte en verkopers van die bediener ontvang en dit in die toepassing vertoon. Maar met thunk kan jy nie net data ontvang nie, maar ook stuur. Kom ons vind uit hoe om dit te doen.

Nadat ons 'n nuwe produk bygevoeg het, bly dit in ons store, dit wil sê binne ons toepassing. Kom ons sorg dat die nuwe produk op die bediener gestoor word.

Kom ons begin by die bediener. Hier sal ons nie 'n GET-, maar 'n POST-versoek moet hanteer nie, aangesien data van die produk nou na die bediener gestuur sal word, wat ons daar sal stoor.

Maak ons toepassing met produkte oop, en in dit die lêer server.js. Soek die skikking handlers daarin en voeg nog 'n verwerker vir die POST-versoek by. Hier sal ons ook die versoekliggaam ontvang, dus moet ons request in die callback deurgee:

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

Skryf nou die kode van ons callback in die krulhakies. Haal eers die data van die versoek en in die geval van 'n fout, stuur 'n antwoord vanaf die bediener dat ons nie die data kon stoor nie en status 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',
			},
		})
	}
})

As die data in orde is, sal ons in die databasis die verkoper vind volgens die id, wat vir ons in die versoek gekom het en hierdie verkoper in data inskryf (die verkoper se data word immers ook op die bediener gestoor ;) ):

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

Skep vervolgens 'n objek vir reaksies vir hierdie produk in die databasis. En nou, met al die nodige velde vir die produk, skep ons die produk self in die databasis:

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

Plaas 'n vertraging en in die laaste reël kode vir ons callback, stuur die antwoord met die produk terug:

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

Hiermee is ons heeltemal klaar met die bediener en ons sal nie weer daarna terugkeer nie.

Terloops, nog 'n nuttige ding. Na die reël export const worker = setupWorker(...handlers) kan jy die volgende kode byvoeg:

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

En nou sal jy die resultaat van elke verwerker se uitvoering in die blaaier se konsole kan sien.

Natuurlik is ons bediener nie regtig nie en as ons die bladsy in die blaaier geforseerd verfris, sal al ons nuwe objekte met produkte verdwyn.

Maak jou toepassing met studente oop. Maak die lêer server.js daarin oop. Voeg die verwerking van 'n POST-versoek by in die skikking handlers. In die liggaam van hierdie versoek sal jy die data van die nuwe bygevoegde student ontvang.

In die liggaam van die callback vir jou http.post, pak die data uit en stuur in die geval van 'n fout 'n toepaslike antwoord.

As alles in orde is, soek dan die onderwyser in die databasis volgens die ontvangde id en skryf hom in die data in. Skryf ook in die data, 'n objek votes geskep op grond van die databasis.

Skep 'n objek student met die nuwe student uit die versamelde data en stuur dit in die bediener se antwoord terug.