Installation af MSW til arbejde med serverdelen i Redux

I de foregående lektioner foretog vi flere yderligere ændringer i vores applikation. Nu er vi nødt til at håndtere serveren, som vores applikation vil udveksle data med.

Vi vil ikke have en rigtig server, så vi vil blot simulere arbejdet med den ved at bruge det fantastiske værktøj Mock Service Worker. Mock Service Worker (MSW) er et værktøj til simulering af API'er, som bruger en standardiseret Service Worker API, designet til at opsnappe anmodninger på netværksniveauet. MSW vil generere fiktive svar (responses) på vores anmodninger (requests). Og, som udviklerne hævder, er værktøjet så effektivt og fleksibelt, at efter fejlfinding med mocks (som ikke kræver nogen speciel oprettelse i applikationen), kan applikationen sættes i drift med en allerede rigtig ekstern server. Dokumentationen for den er ret omfattende, og hvis du bliver interesseret i MSW, kan du læse den på den officielle hjemmeside.

Lad os gå videre til installation af MSW. For at gøre dette åbner vi vores projekt med produkter og indtaster i terminalen:

npm install msw --save-dev

For at MSW skal fungere, skal vi også oprette og kopiere mockServiceWorker.js til en offentlig mappe. Ofte er det mappen public. Vi har en tom mappe public, lad os kopiere den derind. For at gøre dette, kør følgende kommando i terminalen og accepter derefter brugen af public:

npx msw init public

Lad os nu kigge i public, der skulle være dukket op et genereret script kaldet mockServiceWorker.js. Start nu vores applikation med produkter og indtast i browserens adresselinje http://localhost:5173/mockServiceWorker.js (da vores applikation kører på port 5173). Kan du se i browserens vindue, at indholdet af filen mockServiceWorker.js blev vist? Så er alt fint, lad os gå videre.

Dernæst, lad os i mappen src oprette mappen api, og i den filen server.js, hvor vi vil skrive serverkoden. Åbn nu server.js og importer funktionen setupWorker fra den installerede MSW-bibliotek:

import { setupWorker } from 'msw/browser'

Nedenfor i filen opretter vi variablen worker og eksporterer den:

export const worker = setupWorker()

Og nu, lad os åbne filen main.jsx og importere vores worker derind:

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

Nu tilkobler vi den til vores applikation. For at gøre dette, wrapper vi koden, som vi bruger til at oprette roden af vores React-applikation, i en funktion, vi kalder den main og tilføjer en funktion til at starte workeren som den første linje. Selvfølgelig glemmer vi ikke at kalde main selv. Den fulde kode efter alle importlinjerne vil nu se sådan ud:

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 er vi sikre på, at vores applikation ikke begynder at fungere før (og sender anmodninger ;) ), end workeren er startet.

Lad os starte vores applikation og åbne browserens udviklerkonsol. Hvis du kan se teksten '[MSW] Mocking enabled.' i den, så har du gjort det godt og har installeret alt korrekt!!!

Åbn din applikation med studerende. Efter at have gennemgået materialet i denne lektion, skal du installere Mock Service Worker til din applikation.

Opret filen server.js, og opret i den en worker. Tilkobl workeren til applikationen i main.js, som vist i lektionen. Sørg for, at alt fungerer.