Instalacija msw za rad sa serverskim delom u Redux-u

Na prethodnim lekcijama smo napravili nekoliko dodatnih izmena u našoj aplikaciji. Sada nam je potrebno da se pozabavimo serverom, sa kojim će naša aplikacija razmenjivati podatke.

Pravi server nećemo imati, pa ćemo jednostavno simulirati rad sa njim, koristeći odličan alat Mock Service Worker. Mock Service Worker (MSW) je alat za simulaciju API-ja, koji koristi standardizovani API Service Worker-a, dizajniran da presreće zahteve na mrežnom nivou. MSW će generisati lažne odgovore (responses) na naše zahteve (requests). Štaviše, kako tvrde programeri, alat je toliko efikasan i fleksibilan da se nakon otklanjanja grešaka sa lažnim podacima (mock-ovima) (za koje u aplikaciji ne treba ništa posebno kreirati), aplikacija može puštati u rad sa već pravim spoljnim serverom. Dokumentacija za njega je prilično obimna, i, ako se zainteresujete za MSW, možete je pročitati na zvaničnom sajtu.

Hajde da pređemo na instalaciju msw. Za to otvorimo naš projekat sa proizvodima i u terminalu unesemo:

npm install msw --save-dev

Za rad msw nam je takođe potrebno kreirati i kopirati mockServiceWorker.js u neku javnu direktoriju. Često je to folder public. Kod nas postoji prazan folder public, hajde da kopiramo ga tamo. Za to pokrenite u terminalu komandu i onda pristanite na korišćenje public:

npx msw init public

Sada pogledajmo u public, tamo treba da se pojavi generisani skript mockServiceWorker.js. Sada pokrenimo našu aplikaciju sa proizvodima i u adresnoj liniji brauzera unesimo http://localhost:5173/mockServiceWorker.js (pošto naša aplikacija radi na 5173 portu). Vidite li u prozoru brauzera prikazano je sadržaj fajla mockServiceWorker.js? Znači sve odlično, idemo dalje.

Zatim hajde da u folderu src kreiramo folder api, a u njemu fajl server.js, u kome ćemo pisati kod servera. Sada otvorimo server.js i importujemo u njega funkciju setupWorker iz instalirane msw biblioteke:

import { setupWorker } from 'msw/browser'

Ispod u fajlu kreirajmo promenljivu worker i eksportujmo ga:

export const worker = setupWorker()

A sada hajde da otvorimo fajl main.jsx i importujemo u njega našeg workera:

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

Sada ga prikačimo uz našu aplikaciju. Za to kod, pomoću koga kreiramo koren naše React aplikacije, obmotajmo u funkciju, nazovimo je main i prvom linijom dodajmo u nju funkciju pokretanja za workera. Naravno ne zaboravimo da pozovemo i sam main. Pun kod posle svih linija sa importom će sada izgledati ovako:

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

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

main()

Sada smo sigurni da naša aplikacija neće početi da radi pre (i da šalje zahteve ;) ), nego što se pokrene worker.

Hajde da pokrenemo našu aplikaciju i otvorimo u brauzeru konzolu za programere. Ako vidite u njoj tekst '[MSW] Mocking enabled.', onda ste super i sve ste instalirali pravilno!!!

Otvorite vašu aplikaciju sa studentima. Upoznavši se sa materijalom ove lekcije, instalirajte Mock Service Worker za vašu aplikaciju.

Kreirajte fajl server.js, a u njemu kreirajte workera. Povežite worker sa aplikacijom u main.js, kao što je prikazano u lekciji. Uverite se, da sve radi.