Verwerking van POST-verzoek verzonden met thunk in Redux

We hebben de productgegevens en verkopersgegevens van de server opgehaald en weergegeven in de applicatie. Maar met thunk kan je niet alleen gegevens ophalen, maar ook gegevens verzenden. Laten we leren hoe dat moet.

Nadat we een nieuw product toevoegen, blijft het in onze store, dus binnen onze applicatie. Laten we ervoor zorgen dat het nieuwe product op de server wordt opgeslagen.

Laten we beginnen met de server. Hier zullen we nu geen GET, maar een POST-verzoek moeten verwerken, omdat naar de server nu de productgegevens zullen worden gestuurd, die we daar zullen opslaan.

Laten we onze productenapplicatie openen, en daarin het bestand server.js. Laten we daarin de array handlers vinden en er nog een handler voor een POST-verzoek aan toevoegen. Hier zullen we ook de request body accepteren, daarom moeten we in de callback request doorgeven:

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

Laten we nu in de accolades de code van onze callback schrijven. Laten we eerst de requestgegevens extraheren en in geval van een fout een response van de server sturen, dat we de gegevens niet konden opslaan 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',
			},
		})
	}
})

Als de gegevens in orde zijn, dan zullen we in de database de verkoper zoeken op id, die naar ons toe is gekomen in het verzoek en deze verkoper in data schrijven (de verkopersgegevens staan immers ook bij ons opgeslagen op de server ;) ):

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

Vervolgens zullen we in de database voor dit product een object met reacties aanmaken. En nu, met alle benodigde velden voor het product, het product zelf in de database aanmaken:

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

Laten we een vertraging instellen en in de laatste regel code voor onze callback het antwoord met het product terugsturen:

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

Hiermee zijn we volledig klaar met de server en we komen er niet meer op terug.

Trouwens, nog een handig ding. Na de regel export const worker = setupWorker(...handlers) kunt u de volgende code toevoegen:

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

En nu kunt u het resultaat zien van het activeren van elke handler in de browserconsole.

Natuurlijk is onze server niet echt en als we de pagina in de browser geforceerd vernieuwen, dan verdwijnen al onze nieuwe productobjecten.

Open uw applicatie met studenten. Open daarin het bestand server.js. Voeg in de array handlers de verwerking van een POST-verzoek toe. In de body van dit verzoek zult u de gegevens van de nieuw toegevoegde student ontvangen.

In de body van de callback voor uw http.post packt u de gegevens uit en stuurt u in geval van een fout een overeenkomstig antwoord.

Als alles in orde is, zoek dan in de database de docent op basis van de ontvangen id en schrijf deze in de gegevens. Schrijf ook in de gegevens, het op basis van de database gemaakte object votes.

Maak op basis van de verzamelde gegevens een object student met de nieuwe student aan en stuur deze in de serverresponse.