Håndtering af POST-anmodning sendt ved hjælp af thunk i Redux

Vi har modtaget data for produkter og sælgere fra serveren og vist dem i applikationen. Men med thunk kan man ikke kun modtage, men også sende data. Lad os finde ud af, hvordan man gør det.

Efter at vi tilføjer et nyt produkt, forbliver det i vores store, det vil sige inde i vores applikation. Lad os gøre det sådan, at det nye produkt gemmes på serveren.

Lad os starte med serveren. Her bliver vi nødt til at håndtere ikke en GET, men en POST-anmodning, da data for produktet nu vil blive sendt til serveren, som vi vil gemme der.

Lad os åbne vores applikation med produkter, og i den filen server.js. Lad os finde arrayet handlers i den og tilføje endnu en håndterer for POST-anmodningen. Her vil vi modtage også anmodningens krop, derfor skal vi videregive request i callback'en:

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

Nu skriver vi koden for vores callback i de krøllede parenteser. Lad os starte med at udtrække data fra anmodningen, og i tilfælde af fejl sende fra serveren et svar om, at vi ikke kunne gemme data, 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 data er i orden, så finder vi i databasen sælgeren efter id, som kom til os i anmodningen, og skriver denne sælger ind i data (sælgerens data gemmes jo også på serveren ;) ):

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

Derefter opretter vi i databasen et objekt med reaktioner for dette produkt. Og nu, med alle de nødvendige felter for produktet, opretter vi i databasen selve produktet:

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

Lad os tilføje en forsinkelse, og på den sidste kodelinje for vores callback returnere et svar med produktet:

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

Dermed er vi helt færdige med serveren og vender ikke tilbage til den.

Forresten, en anden nyttig ting. Efter linjen export const worker = setupWorker(...handlers) kan du tilføje følgende kode:

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

Og nu kan du se resultatet af hver håndterers udløsning i browserens konsol.

Selvfølgelig er vores server ikke ægte, og hvis vi tvinger en opdatering af siden i browseren, vil alle vores nye objekter med produkter forsvinde.

Åbn din applikation med studerende. Åbn filen server.js i den. Tilføj i arrayet handlers håndtering af POST-anmodningen. I kroppen af denne anmodning vil du modtage data for den nyligt tilføjede studerende.

I kroppen af callback for din http.post skal du pakke data ud, og i tilfælde af fejl sende et passende svar.

Hvis alt er OK, så find i databasen underviseren efter det modtagne id og skriv denne ind i dataene. Skriv også ind i dataene, et objekt votes oprettet baseret på databasen.

Baseret på de indsamlede data, opret et objekt student med den nye studerende og send det tilbage i serverens svar.