Installatie van msw voor werken met de serverkant in Redux

In de vorige lessen hebben we een aantal extra wijzigingen in onze applicatie aangebracht. Nu moeten we de server begrijpen, waarmee onze applicatie gegevens zal uitwisselen.

We hebben geen echte server, dus we simuleren eenvoudig het werken ermee, gebruikmakend van het coole instrument Mock Service Worker. Mock Service Worker (MSW) is een instrument voor het simuleren van API, dat gebruikmaakt van een gestandaardiseerde API Service Worker, bedoeld voor het onderscheppen van verzoeken op netwerkniveau. MSW zal nepantwoorden (responses) genereren op onze verzoeken (requests). Bovendien, zoals de ontwikkelaars beweren, is het instrument zo effectief en flexibel dat na debuggen met mocks (waarvoor in de applicatie niets speciaals hoeft te worden gemaakt), de applicatie in productie kan worden genomen met een echte externe server. De documentatie eraar is behoorlijk uitgebreid, en, als je geïnteresseerd raakt in MSW, kun je deze lezen op de officiële website.

Laten we overgaan tot de installatie van msw. Hiervoor openen we ons project met producten en voeren we in de terminal in:

npm install msw --save-dev

Voor de werking van msw moeten we ook een mockServiceWorker.js maken en kopiëren naar een openbare map. Vaak is dit de map public. Wij hebben een lege map public, laten we het daarheen kopiëren. Start hiervoor in de terminal het commando en ga akkoord met het gebruik van public:

npx msw init public

Laten we nu in public kijken, daar zou het gegenereerde script mockServiceWorker.js moeten verschijnen. Laten we nu onze applicatie met producten starten en in de adresbalk van de browser http://localhost:5173/mockServiceWorker.js invoeren (aangezien onze applicatie op poort 5173 draait). Zie je dat in het browservenster de inhoud van het bestand mockServiceWorker.js wordt weergegeven? Dat is geweldig, we gaan verder.

Laten we vervolgens in de map src een map api maken, en daarin het bestand server.js, waarin we de servercode zullen schrijven. Laten we nu server.js openen en de functie setupWorker importeren uit de geïnstalleerde msw-bibliotheek:

import { setupWorker } from 'msw/browser'

Hieronder in het bestand maken we de variabele worker en exporteren deze:

export const worker = setupWorker()

Laten we nu het bestand main.jsx openen en onze worker importeren:

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

Laten we deze nu aan onze applicatie koppelen. Hiervoor wikkelen we de code, waarmee we de wortel van onze React-applicatie maken, in een functie, we noemen deze main en voegen als eerste regel de startfunctie voor de worker toe. Natuurlijk vergeten we niet main zelf aan te roepen. De volledige code na alle importregels ziet er nu als volgt uit:

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

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

main()

Nu zijn we er zeker van dat onze applicatie niet begint te werken (en verzoeken te sturen ;) ), voordat de worker is gestart.

Laten we onze applicatie starten en de developer console in de browser openen. Als je daarin de tekst '[MSW] Mocking enabled.' ziet, dan heb je het goed gedaan en alles correct geïnstalleerd!!!

Open je applicatie met studenten. Na bestudering van het materiaal van deze les, installeer je Mock Service Worker voor je eigen applicatie.

Maak een bestand server.js aan, en maak daarin een worker. Koppel de worker aan de applicatie in main.js, zoals getoond in de les. Zorg ervoor dat alles werkt.