Installation von MSW für die Arbeit mit dem Serverteil in Redux

In den vorherigen Lektionen haben wir mehrere zusätzliche Änderungen an unserer Anwendung vorgenommen. Jetzt müssen wir uns mit dem Server befassen, mit dem unsere Anwendung Daten austauschen wird.

Einen echten Server werden wir nicht haben, also werden wir einfach die Arbeit mit ihm simulieren, indem wir das coole Tool Mock Service Worker verwenden. Mock Service Worker (MSW) ist ein Tool zum Simulieren von APIs, das eine standardisierte Service Worker API verwendet, die dafür entwickelt wurde, Anfragen auf der Netzwerkebene abzufangen. MSW wird gefälschte Antworten (responses) auf unsere Anfragen (requests) generieren. Und, wie die Entwickcher behaupten, ist das Tool so effektiv und flexibel, dass nach dem Debugging mit Mocks (für die in der Anwendung nichts Spezielles erstellt werden muss), die Anwendung bereits mit einem echten externen Server in Betrieb genommen werden kann. Die Dokumentation dazu ist ziemlich umfangreich, und wenn Sie sich für MSW interessieren, können Sie diese auf der offiziellen Website lesen.

Kommen wir zur Installation von msw. Dazu öffnen wir unser Projekt mit den Produkten und geben im Terminal ein:

npm install msw --save-dev

Für die Arbeit von msw müssen wir auch erstellen und kopieren mockServiceWorker.js in ein öffentliches Verzeichnis. Oft ist es der Ordner public. Wir haben einen leeren Ordner public, lassen Sie uns ihn dorthin kopieren. Starten Sie dazu im Terminal den Befehl und stimmen Sie dann der Verwendung von public zu:

npx msw init public

Schauen wir jetzt in public, dort sollte das generierte Skript mockServiceWorker.js erscheinen. Jetzt starten wir unsere Anwendung mit den Produkten und geben in der Adressleiste des Browsers http://localhost:5173/mockServiceWorker.js ein (da unsere Anwendung auf Port 5173 läuft). Sehen Sie, im Browserfenster wurde der Inhalt der Datei mockServiceWorker.js angezeigt? Das ist großartig, wir gehen weiter.

Als nächstes erstellen wir im Ordner src den Ordner api, und darin die Datei server.js, in der wir den Servercode schreiben werden. Jetzt öffnen wir server.js und importieren darin die Funktion setupWorker aus der installierten msw-Bibliothek:

import { setupWorker } from 'msw/browser'

Darunter in der Datei erstellen wir die Variable worker und exportieren sie:

export const worker = setupWorker()

Und jetzt öffnen wir die Datei main.jsx und importieren unseren Worker:

import { worker } from './api/server'

Jetzt hängen wir ihn an unsere Anwendung an. Dazu wickeln wir den Code, mit dem wir die Wurzel unserer React-Anwendung erstellen, in eine Funktion, nennen sie main und fügen in der ersten Zeile die Startfunktion für den Worker hinzu. Natürlich vergessen wir nicht, main selbst aufzurufen. Der vollständige Code nach allen Importzeilen sieht nun so aus:

async function main() {
	await worker.start({ onUnhandledRequest: 'bypass' })

	ReactDOM.createRoot(document.getElementById('root')).render(
		<React.StrictMode>
			<Provider store={store}>
				<App />
			</Provider>
		</React.StrictMode>
	)
}

main()

Jetzt sind wir sicher, dass unsere Anwendung nicht beginnt zu arbeiten (und Anfragen zu senden ;) ), bevor der Worker gestartet ist.

Lassen Sie uns unsere Anwendung starten und im Browser die Entwicklerkonsole öffnen. Wenn Sie dort den Text '[MSW] Mocking enabled.' sehen, dann haben Sie alles richtig gemacht!!!

Öffnen Sie Ihre Anwendung mit den Studenten. Nachdem Sie sich mit dem Material dieser Lektion vertraut gemacht haben, installieren Sie Mock Service Worker für Ihre Anwendung.

Erstellen Sie die Datei server.js, und erstellen Sie darin einen Worker. Hängen Sie den Worker wie in der Lektion gezeigt an die Anwendung in main.js an. Stellen Sie sicher, dass alles funktioniert.