Hantering av POST-förfrågan skickad med thunk i Redux

Vi har hämtat data för produkter och försäljare från servern och visat dem i applikationen. Men med thunk kan man inte bara hämta utan också skicka data. Låt oss ta reda på hur man gör det.

Efter att vi lägger till en ny produkt, förblir den i vår store, det vill säga inuti vår applikation. Låt oss se till att den nya produkten sparas på servern.

Låt oss börja med servern. Här måste vi hantera inte en GET, utan en POST-förfrågan, eftersom data för produkten nu kommer att skickas till servern, och det är dessa vi kommer att spara där.

Öppna vår produktapplikation, och i den filen server.js. Låt oss hitta arrayen handlers i den och lägga till ytterligare en hanterare för POST-förfrågan. Här kommer vi att ta emot även förfrågans body, därför måste vi skicka med request i callback-funktionen:

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

Nu skriver vi koden för vår callback-funktion inom klammerparenteserna. Låt oss först extrahera förfrågans data och vid fel skicka ett svar från servern om att vi inte kunde spara data och 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',
			},
		})
	}
})

Om allt är i ordning med data, så hittar vi i databasen försäljaren efter id, som kom till oss i förfrågan och skriver in denna försäljare i data (försäljarens data ligger ju också lagrad på servern ;) ):

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

Därefter skapar vi ett objekt för reaktioner till denna produkt i databasen. Och nu, med alla nödvändiga fält för produkten, skapar vi själva produkten i databasen:

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

Låt oss lägga till en fördröjning och på den sista kodraden för vår callback returnera ett svar med produkten:

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

Här är vi helt klara med servern och kommer inte att återvända till den.

Förresten, en annan användbar sak. Efter raden export const worker = setupWorker(...handlers) kan du lägga till följande kod:

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

Och nu kan du se resultatet av varje hanterares utlösande i webbläsarens konsol.

Naturligtvis är vår server inte riktig och om vi tvingas uppdatera sidan i webbläsaren, försvinner alla våra nya produktobjekt.

Öppna din applikation med studenter. Öppna filen server.js i den. Lägg till i arrayen handlers hantering av en POST-förfrågan. I body för denna förfrågan kommer du att ta emot data för den nya tillagda studenten.

I body för callback för din http.post, packa upp data och vid fel, skicka ett lämpligt svar.

Om allt är ok, hitta i databasen läraren efter det mottagna id:t och skriv in denne i data. Skriv även in i data, ett objekt för votes skapat baserat på databasen.

Utifrån den samlade datan, skapa ett objekt student med den nya studenten och skicka tillbaka den i serverns svar.