Installera msw för att arbeta med serverdelen i Redux

I tidigare lektioner har vi gjort några ytterligare ändringar i vår applikation. Nu behöver vi ta itu med servern som vår applikation kommer att kommunicera med.

Vi kommer inte att ha en riktig server, så vi kommer bara att simulera arbete med den med hjälp av det coola verktyget Mock Service Worker. Mock Service Worker (MSW) är ett verktyg för att imitera API som använder en standardiserad Service Worker API, avsett att avlyssna förfrågningar på nätverksnivån. MSW kommer att generera falska svar (responses) på våra förfrågningar (requests). Dessutom, som utvecklarna hävdar, är verktyget så effektivt och flexibelt att efter felsökning med mockar (för vilka inget speciellt behöver skapas i applikationen), kan applikationen sättas i produktion med en riktig extern server. Dokumentationen för den är ganska omfattande, och om du blir intresserad av MSW, kan du läsa den på den officiella webbplatsen.

Låt oss gå vidare till installationen av msw. För att göra detta öppnar vi vårt projekt med produkter och i terminalen skriver vi:

npm install msw --save-dev

För att msw ska fungera behöver vi också skapa och kopiera mockServiceWorker.js till någon offentlig katalog. Oftast är det mappen public. Vi har en tom mapp public, låt oss kopiera den dit. För att göra detta, kör i terminalen kommandot och godkänn sedan användningen av public:

npx msw init public

Nu tittar vi i public, där borde det finnas en genererad skript mockServiceWorker.js. Nu startar vi vår applikation med produkter och i webbläsarens adressfält skriver vi http://localhost:5173/mockServiceWorker.js (eftersom vår applikation körs på port 5173). Ser du i webbläsarfönstret att innehållet i filen mockServiceWorker.js visas? Det betyder att allt är bra, vi fortsätter.

Låt oss sedan i mappen src skapa mappen api, och i den filen server.js, där vi skriver serverkoden. Nu öppnar vi server.js och importerar funktionen setupWorker från det installerade msw-biblioteket:

import { setupWorker } from 'msw/browser'

Skapa nedan i filen variabeln worker och exportera den:

export const worker = setupWorker()

Låt oss nu öppna filen main.jsx och importera vår worker:

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

Nu kopplar vi den till vår applikation. För att göra detta kommer koden som används för att skapa roten av vårt React-program att omslutas av en funktion, vi kallar den main och lägger till funktionen för att starta workern som första rad. Naturligtvis glömmer vi inte att anropa själva main. Den fullständiga koden efter alla rader med import kommer nu att se ut så här:

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 är vi säkra på att vår applikation inte kommer att börja fungera förrän (och skicka förfrågningar ;) ), workern har startat.

Låt oss starta vår applikation och öppna webbläsarens utvecklarkonsol. Om du ser texten '[MSW] Mocking enabled.' där, så är du duktig och har installerat allt korrekt!!!

Öppna din applikation med studenter. Efter att ha gått igenom materialet i den här lektionen, installera Mock Service Worker för din applikation.

Skapa filen server.js, och skapa i den en worker. Koppla workern till applikationen i main.js, som visas i lektionen. Se till att allt fungerar.