Instalacja MSW do pracy z częścią serwerową w Redux

Na poprzednich zajęciach wprowadziliśmy kilka dodatkowych zmian w naszej aplikacji. Teraz musimy uporać się z serwerem, z którym nasza aplikacja będzie wymieniać dane.

Prawdziwego serwera nie będziemy mieli, więc po prostu zasymulujemy pracę z nim, używając fajnego narzędzia Mock Service Worker. Mock Service Worker (MSW) to narzędzie do imitowania API, które wykorzystuje standaryzowany API Service Worker, przeznaczony do przechwytywania żądań na poziomie sieci. MSW będzie generować fikcyjne odpowiedzi (responses) na nasze żądania (requests). Co więcej, jak twierdzą programiści, narzędzie jest tak skuteczne i elastyczne, że po debugowaniu z atrapami (dla których w aplikacji nie trzeba niczego specjalnie tworzyć), aplikację można uruchomić do pracy już z prawdziwym zewnętrznym serwerem. Dokumentacja jest dość obszerna i, jeśli zainteresujesz się MSW, możesz ją przeczytać na oficjalnej stronie.

Przejdźmy do instalacji msw. W tym celu otwórz nasz projekt z produktami i w terminalu wprowadź:

npm install msw --save-dev

Do pracy msw potrzebujemy również utworzyć i skopiować mockServiceWorker.js do jakiegoś publicznego katalogu. Często jest to folder public. My mamy pusty folder public, skopiujmy go tam. W tym celu uruchom w terminalu polecenie, a następnie zaakceptuj użycie public:

npx msw init public

Teraj zajrzyjmy do public, tam powinien pojawić się wygenerowany skrypt mockServiceWorker.js. Teraz uruchommy naszą aplikację z produktami i w pasku adresu przeglądarki wprowadź http://localhost:5173/mockServiceWorker.js (ponieważ nasza aplikacja działa na porcie 5173). Widzisz, w oknie przeglądarki wyświetliła się zawartość pliku mockServiceWorker.js? Świetnie, idziemy dalej.

Następnie utwórzmy w folderze src folder api, a w nim plik server.js, w którym będziemy pisać kod serwera. Teraz otwórzmy server.js i zaimportujmy do niego funkcję setupWorker z zainstalowanej biblioteki msw:

import { setupWorker } from 'msw/browser'

Poniżej w pliku utwórzmy zmienną worker i wyeksportujmy ją:

export const worker = setupWorker()

A teraz otwórzmy plik main.jsx i zaimportujmy do niego naszego workera:

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

Teraz podepnijmy go do naszej aplikacji. W tym celu kod, za pomocą którego tworzymy korzeń naszej aplikacji React, opakujemy w funkcję, nazwijmy ją main i w pierwszej linijce dodajmy do niej funkcję uruchamiania dla workera. Oczywiście nie zapomnijmy wywołać i samej main. Pełny kod po wszystkich linijkach z importem będzie teraz wyglądał tak:

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 jesteśmy pewni, że nasza aplikacja nie zacznie działać wcześniej (i wysyłać żądań ;) ), niż uruchomi się worker.

Uruchommy naszą aplikację i otwórzmy w przeglądarce konsolę dla programistów. Jeśli widzisz w niej tekst '[MSW] Mocking enabled.', to jesteś świetny i wszystko zainstalowałeś poprawnie!!!

Otwórz swoją aplikację ze studentami. Zapoznawszy się z materiałem z tej lekcji, zainstaluj Mock Service Worker dla swojej aplikacji.

Utwórz plik server.js, a w nim utwórz workera. Podłącz workera do aplikacji w main.js, jak pokazano w lekcji. Upewnij się, że wszystko działa.