Installasjon av msw for arbeid med serverdelen i Redux

I de foregående leksjonene har vi gjort flere tilleggsendringer i applikasjonen vår. Nå må vi håndtere serveren som applikasjonen vår vil utveksle data med.

Vi vil ikke ha en ekte server, så vi vil bare simulere arbeidet med den ved å bruke det kule verktøyet Mock Service Worker. Mock Service Worker (MSW) er et verktøy for å simulere API som bruker en standardisert API Service Worker, designet for å avlytte forespørsler på nettverksnivå. MSW vil generere fiktive svar (responses) på våre forespørsler (requests). Dessuten, som utviklerne hevder, er verktøyet så effektivt og fleksibelt at etter feilsøking med mocks (som ikke krever noen spesielle endringer i applikasjonen), kan applikasjonen settes i produksjon med en ekte ekstern server. Dokumentasjonen for den er ganske omfattende, og hvis du blir interessert i MSW, kan du lese den på den offisielle nettsiden.

La oss gå videre til installasjon av msw. For å gjøre dette, åpner vi prosjektet vårt med produkter og i terminalen skriver vi:

npm install msw --save-dev

For at msw skal fungere, må vi også opprette og kopiere mockServiceWorker.js til en offentlig mappe. Ofte er dette mappen public. Vi har en tom mappe public, la oss kopiere den dit. For å gjøre dette, kjør i terminalen kommandoen og godta deretter bruken av public:

npx msw init public

La oss nå se i public, der skal det dukke opp et generert skript mockServiceWorker.js. La oss nå starte applikasjonen vår med produkter og i adresselinjen i nettleseren skrive http://localhost:5173/mockServiceWorker.js (siden applikasjonen vår kjører på port 5173). Ser du at innholdet i filen mockServiceWorker.js ble vist i nettleservinduet? Da er alt bra, la oss gå videre.

Deretter, la oss i mappen src opprette en mappe api, og i den filen server.js, der vi skal skrive serverkoden. La oss nå åpne server.js og importere funksjonen setupWorker fra den installerte msw-biblioteket:

import { setupWorker } from 'msw/browser'

La oss lage en variabel worker nedenfor i filen og eksportere den:

export const worker = setupWorker()

La oss nå åpne filen main.jsx og importere worker-en vår:

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

La oss nå koble den til applikasjonen vår. For å gjøre dette, vil vi wrappe koden som brukes til å opprette roten av React-applikasjonen vår i en funksjon, vi kaller den main og legger til en funksjon for å starte worker-en som den første linjen. Selvfølgelig må vi ikke glemme å kalle main selv. Den fullstendige koden etter alle importeringslinjene vil nå se slik ut:

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

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

main()

Nå er vi sikre på at applikasjonen vår ikke vil begynne å kjøre før (og sende forespørsler ;) ), enn worker-en starter.

La oss starte applikasjonen vår og åpne utviklerkonsollen i nettleseren. Hvis du ser teksten '[MSW] Mocking enabled.' i den, har du gjort en god jobb og installert alt riktig!!!

Åpne applikasjonen din med studenter. Etter å ha sett gjennom materialet i denne leksjonen, installer Mock Service Worker for applikasjonen din.

Opprett filen server.js, og i den oppretter du en worker. Koble worker-en til applikasjonen i main.js, som vist i leksjonen. Forsikre deg om at alt fungerer.