Instalace MSW pro práci se serverovou částí v Reduxu

V předchozích lekcích jsme provedli několik dalších změn v naší aplikaci. Nyní se potřebujeme vypořádat se serverem, s kterým bude naše aplikace komunikovat.

Skutečný server mít nebudeme, proto budeme jeho práci pouze simulovat pomocí skvělé nástroje Mock Service Worker. Mock Service Worker (MSW) je nástroj pro simulaci API, který používá standardizované API Service Worker, určené k zachycení požadavků na síťové úrovni. MSW bude generovat falešné odpovědi (responses) na naše požadavky (requests). Přitom, jak tvrdí vývojáři, je nástroj tak efektivní a flexibilní, že po ladění s mocky (pro které v aplikaci není potřeba vytvářet nic speciálního), lze aplikaci spustit do provozu s již skutečným externím serverem. Dokumentace k němu je poměrně rozsáhlá, a pokud vás MSW zaujme, můžete si ji přečíst na oficiálních stránkách.

Pojďme přejít k instalaci MSW. K tomu otevřeme náš projekt s produkty a v terminálu zadáme:

npm install msw --save-dev

Pro práci MSW také potřebujeme vytvořit a zkopírovat mockServiceWorker.js do nějaké veřejné složky. Často je to složka public. My máme prázdnou složku public, pojďme ji tam zkopírovat. K tomu spusťte v terminálu příkaz a poté souhlaste s použitím public:

npx msw init public

Nyní nahlédneme do public, tam by se měl objevit vygenerovaný skript mockServiceWorker.js. Nyní spusťme naši aplikaci s produkty a v adresním řádku prohlížeče zadáme http://localhost:5173/mockServiceWorker.js (protože naše aplikace běží na portu 5173). Vidíte, že v okně prohlížeče se zobrazil obsah souboru mockServiceWorker.js? To znamená, že je vše skvělé, jdeme dál.

Dále pojďme ve složce src vytvořit složku api, a v ní soubor server.js, ve kterém budeme psát kód serveru. Nyní otevřeme server.js a importujeme do něj funkci setupWorker z nainstalované knihovny MSW:

import { setupWorker } from 'msw/browser'

Níže v souboru vytvoříme proměnnou worker a exportujeme ji:

export const worker = setupWorker()

A nyní pojďme otevřít soubor main.jsx a importovat do něj našeho workera:

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

Nyní jej připojíme k naší aplikaci. K tomu kód, pomocí kterého vytváříme kořen naší React aplikace, obalíme funkcí, nazveme ji main a na prvním řádku do ní přidáme funkci spuštění pro workera. Samozřejmě nezapomeneme zavolat i samotné main. Úplný kód po všech řádcích s importem bude nyní vypadat 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()

Nyní jsme si jisti, že naše aplikace nezačne pracovat dříve (a odesílat požadavky ;) ), než se spustí worker.

Spusťme naši aplikaci a otevřeme v prohlížeči konzoli pro vývojáře. Pokud v ní vidíte text '[MSW] Mocking enabled.', jste skvělí a vše jste nainstalovali správně!!!

Otevřete vaši aplikaci se studenty. Seznámíte-li se s materiálem této lekce, nainstalujte Mock Service Worker pro vaši aplikaci.

Vytvořte soubor server.js, a v něm vytvořte workera. Připojte worker k aplikaci v main.js, jak je ukázáno v lekci. Ujistěte se, že vše funguje.