Namestitev MSW za delo z odjemalsko stranjo v Redux

V prejšnjih lekcijah smo naredili nekaj dodatnih sprememb v naši aplikaciji. Zdaj se moramo lotiti strežnika, s katerim se bo naša aplikacija izmenjevala podatke.

Pravega strežnika ne bomo imeli, zato bomo preprosto simulirali delo z njim z uporabo odličnega orodja Mock Service Worker. Mock Service Worker (MSW) je orodje za simulacijo API-ja, ki uporablja standardiziran API Service Worker, namenjen prestrezanju zahtev na omrežni ravni. MSW bo generiral lažne odzive (responses) na naše zahteve (requests). Poleg tega, kakor trdijo razvijalci, je orodje tako učinkovito in fleksibilno, da lahko po odpravljanju napak z mocki (za katere v aplikaciji ni potrebno ustvariti ničesar posebnega), aplikacijo zaženemo v delo z že pravim zunanjim strežnikom. Dokumentacija zanj je precej obsežna in, če se zanimate za MSW, jo lahko preberete na uradni spletni strani.

Pojdimo k namestitvi MSW. Za to odprimo naš projekt s produkti in v terminalu vpišimo:

npm install msw --save-dev

Za delovanje MSW moramo prav tako ustvariti in kopirati mockServiceWorker.js v neko javno mapo. Pogosto je to mapa public. Mi imamo prazno mapo public, kopirajmo jo tja. Za to zaženite v terminalu ukaz in nato privolite na uporabo public:

npx msw init public

Zdaj poglejmo v public, tam bi se moral pojaviti generirani skript mockServiceWorker.js. Zdaj zaženimo našo aplikacijo s produkti in v naslovno vrstico brskalnika vpišimo http://localhost:5173/mockServiceWorker.js (ker naša aplikacija deluje na 5173 vratih). Ali vidite v oknu brskalnika, da se je prikazala vsebina datoteke mockServiceWorker.js? Pomeni, da je vse odlično, pojdimo naprej.

Nato ustvarimo v mapi src mapo api, v njej pa datoteko server.js, v kateri bomo pisali kodo strežnika. Zdaj odprimo server.js in uvozimo vanj funkcijo setupWorker iz nameščene knjižnice MSW:

import { setupWorker } from 'msw/browser'

Spodaj v datoteki ustvarimo spremenljivko worker in jo izvozimo:

export const worker = setupWorker()

Zdaj pa odprimo datoteko main.jsx in vanj uvozimo naš worker:

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

Zdaj ga priklopimo k naši aplikaciji. Za to kodo, s pomočjo katere ustvarimo koren naše React aplikacije, ovijemo v funkcijo, poimenujmo jo main in kot prvo vrstico dodajmo vanj funkcijo zagon za worker. Seveda ne pozabimo poklicati tudi same main. Celotna koda po vseh vrsticah z uvozom bo zdaj videti tako:

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

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

main()

Zdaj smo prepričani, da se naša aplikacija ne bo začela delovati prej (in pošiljati zahtevkov ;) ), kot se bo zagnal worker.

Zaženimo našo aplikacijo in odprimo v brskalniku konzolo za razvijalce. Če vidite v njej besedilo '[MSW] Mocking enabled.', potem ste odlični in ste vse namestili pravilno!!!

Odprite vašo aplikacijo s študenti. Po preučitvi gradiva te lekcije namestite Mock Service Worker za vašo aplikacijo.

Ustvarite datoteko server.js, v njej ustvarite worker. Pripniti worker k aplikaciji v main.js, kot je prikazano v lekciji. Prepričajte se, da vse deluje.