Inštalácia msw pre prácu so serverovou časťou v Reduxe

Na predchádzajúcich lekciách sme urobili niekoľko ďalších zmien v našej aplikácii. Teraz sa potrebujeme vysporiadať so serverom, s ktorým bude naša aplikácia komunikovať a vymieňať si dáta.

Skutočný server mať nebudeme, preto jednoducho simulujeme prácu s ním, pomocou super nástroja Mock Service Worker. Mock Service Worker (MSW) je nástroj na simuláciu API, ktorý používa štandardizované API Service Worker, navrhnuté na zachytávanie požiadaviek na sieťovej úrovni. MSW bude generovať fiktívne odpovede (responses) na naše požiadavky (requests). A čo viac, ako tvrdia vývojári, nástroj je tak efektívny a flexibilný, že po ladení s mockmi (pre ktoré v aplikácii netreba vytvárať nič špeciálne), môže byť aplikácia spustená na produkciu so skutočným externým serverom. Dokumentácia k nemu je pomerne rozsiahla, a ak vás MSW zaujme, môžete si ju prečítať na oficiálnej webstránke.

Poďme prejsť k inštalácii msw. Pre to otvoríme náš projekt s produktami a v termináli zadáme:

npm install msw --save-dev

Pre fungovanie msw potrebujeme tiež vytvoriť a skopírovať mockServiceWorker.js do nejakého verejného priečinka. Často je to priečinok public. My máme prázdny priečinok public, poďme ho tam skopírovať. Preto spustite v termináli príkaz a potom súhlaste s použitím public:

npx msw init public

Teraz sa pozrieme do public, tam by sa mal objaviť vygenerovaný skript mockServiceWorker.js. Teraz spustíme našu aplikáciu s produktami a v adresnom riadku prehliadača zadáme http://localhost:5173/mockServiceWorker.js (keďže naša aplikácia beží na porte 5173). Vidíte, že v okne prehliadača sa zobrazil obsah súboru mockServiceWorker.js? Znamená to, že všetko je vporiadku, ideme ďalej.

Ďalej vytvorme v priečinku src priečinok api a v ňom súbor server.js, v ktorom budeme písať kód servera. Teraz otvorme server.js a importujme do neho funkciu setupWorker z nainštalovanej knižnice msw:

import { setupWorker } from 'msw/browser'

Nižšie v súbore vytvorme premennú worker a exportujme ju:

export const worker = setupWorker()

A teraz otvorme súbor main.jsx a importujme do neho nášho workera:

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

Teraz ho pripojme k našej aplikácii. Pre to kód, pomocou ktorého vytvárame koreň našej React aplikácie, obalíme funkciou, nazvime ju main a na prvom riadku do nej pridajme funkciu spustenia pre workera. Samozrejme, nezabudnime volať aj samotnú main. Úplný kód po všetkých riadkoch s importom bude teraz vyzerať takto:

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

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

main()

Teraz sme si istí, že naša aplikácia nezačne fungovať skôr (a odosielať požiadavky ;) ), ako sa spustí worker.

Spustíme našu aplikáciu a otvorme v prehliadači konzolu pre vývojárov. Ak v nej vidíte text '[MSW] Mocking enabled.', tak ste šikovní a všetko ste nainštalovali správne!!!

Otvorte vašu aplikáciu so študentmi. Po oboznámení sa s materiálom tejto lekcie, nainštalujte Mock Service Worker pre vašu aplikáciu.

Vytvorte súbor server.js a v ňom vytvorte workera. Pripojte worker k aplikácii v main.js, ako je ukázané v lekcii. Uistite sa, že všetko funguje.