Behandling av POST-forespørsel sendt ved hjelp av thunk i Redux

Vi har hentet data om produkter og selgere fra serveren og vist dem i applikasjonen. Men med thunk kan man ikke bare motta, men også sende data. La oss finne ut hvordan man gjør det.

Etter at vi legger til et nytt produkt, forblir det i vår store, det vil si innenfor vår applikasjon. La oss sørge for at det nye produktet lagres på serveren.

La oss starte med serveren. Her må vi håndtere ikke en GET, men en POST-forespørsel, siden data om produktet na vil bli sendt til serveren, og det er disse vi vil lagre der.

La oss åpne applikasjonen vår med produktene, og i den filen server.js. La oss finne arrayet handlers i den og legge til en ny handler for POST-forespørsel. Her må vi også motta forespørselens body, så i callback må vi sende med request:

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

La oss na skrive koden for callback-funksjonen vår i krøllparentesene. Først, la oss hente ut dataene fra forespørselen, og ved feil sende fra serveren et svar om at vi ikke kunne lagre dataene og 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',
			},
		})
	}
})

Hvis dataene er i orden, vil vi i databasen finne selgeren etter id, som kom til oss i forespørselen, og skrive inn denne selgeren i data (selgerens data er jo også lagret på serveren vår ;) ):

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

Deretter vil vi i databasen opprette et objekt for reaksjoner for dette produktet. Og na, med alle de nødvendige feltene for produktet, oppretter vi i databasen selve produktet:

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

La oss sette inn en forsinkelse, og i den siste kodelinjen for callback-funksjonen vår returnere et svar med produktet:

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

Dermed er vi helt ferdige med serveren og kommer ikke tilbake til den.

Forresten, enna en nyttig ting. Etter linjen export const worker = setupWorker(...handlers) kan du legge til følgende kode:

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

Og na kan du se resultatet av utløsningen for hver handler i nettleserens konsoll.

Selvfølgelig er serveren vår ekte, og hvis vi tvinger fram en oppdatering av siden i nettleseren, vil alle vare nye objekter med produkter forsvinne.

Åpne applikasjonen din med studenter. Åpne filen server.js i den. Legg til i arrayet handlers håndtering av POST-forespørsel. I bodyen til denne forespørselen vil du motta dataene for den nylig tilføyde studenten.

I bodyen til callback for din http.post pakker du ut dataene, og ved feil sender du et passende svar.

Hvis alt er i orden, finn i databasen foreleseren basert på mottatt id og skriv han inn i dataene. Skriv også inn i dataene, et objekt for votes opprettet basert på databasen.

Basert på de innsamlede dataene, opprett et objekt student med den nye studenten og send det tilbake i serverens svar.