Verarbeitung einer POST-Anfrage, die mit Thunk in Redux gesendet wurde

Wir haben die Produkt- und Verkäuferdaten vom Server abgerufen und sie in der Anwendung angezeigt. Mit Thunk kann man aber nicht nur Daten abrufen, sondern auch senden. Lassen Sie uns herausfinden, wie das geht.

Nachdem wir ein neues Produkt hinzugefügt haben, bleibt es in unserem Store, also innerhalb unserer Anwendung. Lassen Sie uns dafür sorgen, dass das neue Produkt auf dem Server gespeichert wird.

Beginnen wir mit dem Server. Hier müssen wir keine GET-, sondern eine POST-Anfrage bearbeiten, da nun die Produktdaten an den Server gesendet werden, die wir dort speichern werden.

Öffnen wir unsere Produktanwendung und darin die Datei server.js. Suchen wir darin das Array handlers und fügen einen weiteren Handler für die POST-Anfrage hinzu. Hier empfangen wir auch den Request Body, daher müssen wir request an den Callback übergeben:

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

Nun schreiben wir den Code für unseren Callback in die geschweiften Klammern. Extrahieren wir zunächst die Anfragedaten und senden wir im Fehlerfall vom Server eine Antwort, dass wir die Daten nicht speichern konnten, und den 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',
			},
		})
	}
})

Wenn die Daten in Ordnung sind, finden wir in der Datenbank den Verkäufer anhand der ID, die uns in der Anfrage gesendet wurde, und weisen diesen Verkäufer in data zu (schließlich sind die Verkäuferdaten auch auf dem Server gespeichert ;) ):

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

Als nächstes erstellen wir in der Datenbank für dieses Produkt ein Objekt für Reaktionen. Und nun, da wir alle notwendigen Felder für das Produkt haben, erstellen wir in der Datenbank das Produkt selbst:

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

Fügen wir eine Verzögerung ein und geben in der letzten Codezeile für unseren Callback die Antwort mit dem Produkt zurück:

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

Damit sind wir mit dem Server vollständig fertig und werden nicht mehr darauf zurückkommen.

Übrigens, noch eine nützliche Sache. Nach der Zeile export const worker = setupWorker(...handlers) können Sie folgenden Code hinzufügen:

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

Und nun können Sie das Ergebnis der Ausführung jedes Handlers in der Browser-Konsole sehen.

Unser Server ist natürlich nicht echt, und wenn wir die Seite im Browser zwangsweise aktualisieren, verschwinden alle unsere neuen Produktobjekte.

Öffnen Sie Ihre Studenten-Anwendung. Öffnen Sie darin die Datei server.js. Fügen Sie dem Array handlers die Verarbeitung einer POST-Anfrage hinzu. Im Body dieser Anfrage werden Sie die Daten des neu hinzugefügten Studenten empfangen.

Entpacken Sie im Body des Callbacks für Ihren http.post die Daten und senden Sie im Fehlerfall eine entsprechende Antwort.

Wenn alles in Ordnung ist, dann finden Sie in der Datenbank den Dozenten anhand der erhaltenen ID und weisen Sie ihn den Daten zu. Weisen Sie den Daten auch ein auf der Datenbank basierendes Objekt votes zu.

Erstellen Sie aus den gesammelten Daten ein Objekt student mit dem neuen Studenten und senden Sie es in der Serverantwort zurück.