Az msw telepítése a szerveroldali munkához a Redux-ban

Az előző órákon több további módosítást is végeztünk az alkalmazásunkban. Most meg kell ismerkednünk a szerverrel, amellyel az alkalmazásunk adatcserét fog végezni.

Nem lesz igazi szerverünk, ezért mi csak szimuláljuk a vele való munkát, egy menő eszköz, a Mock Service Worker használatával. A Mock Service Worker (MSW) egy API szimulációs eszköz, amely a szabványosított Service Worker API-t használja, hálózati szinten történő kérések elfogására. Az MSW hamis válaszokat (responses) fog generálni a kéréseinkre (requests). Ráadásul, ahogy a fejlesztők állítják, az eszköz olyan hatékony és rugalmas, hogy a mock-okkal való hibakeresés után (amelyekhez az alkalmazásban nincs szükség speciális létrehozásra), az alkalmazás már egy valódi külső szerverrel is üzembe helyezhető. A dokumentáció elég átfogó, és ha érdekel az MSW, olvasd el a hivatalos weboldalon.

Most pedig térjünk át az msw telepítésére. Ehhez nyissuk meg a termékekkel kapcsolatos projektünket és a terminálban írjuk be:

npm install msw --save-dev

Az msw működéséhez szükségünk van arra is, hogy létrehozzunk és átmásoljunk egy mockServiceWorker.js fájlt valamilyen publikus könyvtárba. Gyakran ez a public mappa. Nekünk van egy üres public mappánk, másoljuk át oda. Ehhez futtasd a terminálban ezt a parancsot, majd fogadd el a public használatát:

npx msw init public

Most nézzünk be a public mappába, ott meg kell jelennie a generált mockServiceWorker.js szkriptnek. Most indítsuk el a termék alkalmazásunkat és a böngésző címsorában írjunk be: http://localhost:5173/mockServiceWorker.js (mivel az alkalmazásunk a 5173 porton fut). Látod, hogy a böngésző ablakában megjelenik a mockServiceWorker.js fájl tartalma? Ez nagyszerű, haladjunk tovább.

Következő lépésben hozzunk létre a src mappában egy api mappát, és abban egy server.js fájlt, amelyben a szerver kódját fogjuk írni. Most nyissuk meg a server.js fájlt és importáljuk bele a setupWorker függvényt a telepített msw könyvtárból:

import { setupWorker } from 'msw/browser'

Alább a fájlban hozzunk létre egy worker változót és exportáljuk:

export const worker = setupWorker()

És most nyissuk meg a main.jsx fájlt és importáljuk bele a workerünket:

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

Most kapcsoljuk hozzá az alkalmazásunkhoz. Ehhez a kódot, amellyel létrehozzuk a React alkalmazásunk gyökerét, becsomagoljuk egy függvénybe, nevezzük el main-nek és az első sorban adjuk hozzá a worker indítási függvényét. Természetesen ne felejtsük el meg hívni magát a main függvényt. A teljes kód az összes import sor után így fog kinézni:

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

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

main()

Most biztosak lehetünk benne, hogy az alkalmazásunk nem fog elindulni (és kéréseket küldeni ;) ), mielőtt a worker elindulna.

Indítsuk el az alkalmazásunkat és nyissuk meg a böngésző fejlesztői konzolját. Ha látod benne ezt a szöveget: '[MSW] Mocking enabled.', akör ügyes vagy és mindent jól telepítettél!!!

Nyisd meg a diákokkal kapcsolatos alkalmazásodat. Miután megismerkedtél ennek a leckének az anyagával, telepítsd a Mock Service Worker-t az alkalmazásodba.

Hozz létre egy server.js fájlt, és benne hozz létre egy workert. Kapcsold hozzá a workert az alkalmazáshoz a main.js fájlban, ahogyan az az órán bemutatásra került. Győződj meg arról, hogy minden működik.