Senden von Daten vom Server per GET-Anfrage in Redux

Wir haben also eine Datenbank mit Daten. Das Erste, was wir beim Start unserer Redux-Anwendung tun werden, ist das Abrufen der Produktdaten vom Server. Dazu müssen wir aus unserer Anwendung eine GET-Anfrage senden. Lassen Sie uns diese auf der Serverseite verarbeiten.

Öffnen wir unsere Produktanwendung, und darin die Datei server.js. Um mit HTTP-Anfragen arbeiten zu können, müssen wir einige Werkzeuge aus msw in die Datei importieren, lassen Sie uns das tun:

import { http, HttpResponse, delay } from 'msw'

Nehmen wir auch sofort Anpassungen an der Realität vor, also mögliche Netzwerkverzögerungen. Lassen Sie den Wert unserer künstlichen Verzögerung 2 Sekunden betragen, damit wir sehen, wie die Daten geladen werden. Schreiben wir sie nach const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

Und jetzt, am Ende der Datei, vor dem Export des Workers, legen wir ein Array für die API Anfragehandler an:

export const handlers = []

Und dann schreiben wir in die eckigen Klammern den ersten Handler zum Abfangen der GET-Anfrage für Produkte:

export const handlers = [http.get()]

Als ersten Parameter für http.get übergeben wir eine gefälschte Adresse, zum Beispiel '/fakeServer/products', und als zweiten einen asynchronen Callback:

export const handlers = [http.get('/fakeServer/products', async () => {})]

Nun schreiben wir den Code für diesen Callback. Mit seiner Hilfe werden wir alle Produkte aus der Datenbank extrahieren. Hier verwenden wir auch die Funktion serializeProduct, deren Code wir in der letzten Lektion geschrieben haben. Lassen Sie uns sie in map übergeben. Dann fügen wir eine Verzögerung hinzu (als ob das Netzwerk langsam wäre) und geben in response die Objekte mit den Produktdaten als JSON zurück:

export const handlers = [
	http.get('/fakeServer/products', async () => {
		const products = db.product.getAll().map(serializeProduct)
		await delay(ARTIFICIAL_DELAY_MS)
		return HttpResponse.json(products)
	}),
]

Und der letzte Schliff. Wir haben den ersten Handler für unseren Worker geschrieben, lassen Sie uns diesem Worker das Array handlers übergeben. Dazu ändern wir die letzte Zeile des Codes in der Datei in:

export const worker = setupWorker(...handlers)

Öffnen Sie Ihre Studentenanwendung, und darin die Datei server.js. Importieren Sie in die Datei die angegebenen Werkzeuge aus msw. Nachdem Sie den Stoff dieser Lektion studiert haben, erstellen Sie ein leeres Array für Handler zum Abfangen von Anfragen. Schreiben Sie darin den Code für den Handler der GET-Anfrage für Studenten. Als Pfad lassen Sie '/fakeServer/students' verwenden.

Vergessen Sie am Ende der Datei nicht, das Array der Handler handlers an den Worker zu übergeben.