MSW paigaldamine Reduxi taustsüsteemi tööks

Eelmistel tundidel tegime mitu täiendavat muudatust oma rakenduses. Nüüd peame tegelema serveriga, millega meie rakendus suhtleb andmeid.

Meil ei ole päris serverit, seega me lihtsalt simuleerime sellega töötamist, kasutades lahedat tööriista Mock Service Worker. Mock Service Worker (MSW) on API simuleerimise tööriist, mis kasutab standardiseeritud Service Worker API-t, mis on mõeldud päringute peatamiseks võrgustiku tasandil. MSW genereerib võltsvastuseid (responses) meie päringutele (requests). Pealegi, nagu arendajad väidavad, on tööriist nii tõhus ja paindlik, et pärast võltsandmetega silumist (mille jaoks rakenduses ei pea midagi erilist looma), saab rakenduse lasta tööle juba päris välisserveriga. Dokumentatsioon selle kohta on üsna mahukas, ja kui te huvi tunnete MSW vastu, võite seda lugeda ametlikul veebisaidil.

Hakkame msw paigaldamisega. Selleks avame oma tooterakenduse ja sisestame terminali:

npm install msw --save-dev

MSW tööks peame looma ja kopeerima mockServiceWorker.js mõnda avalikku kataloogi. Sageli on see kaust public. Meil on tühi kaust public, kopeerime selle sinna. Selleks käivitage terminalis käsk ja seejärel nõustuge public kasutamisega:

npx msw init public

Nüüd vaatame public, sinna peaks ilmuma genereeritud skript mockServiceWorker.js. Nüüd käivitame oma tooterakenduse ja brauseri aadressiribale sisestame http://localhost:5173/mockServiceWorker.js (kuna meie rakendus töötab 5173 pordil). Näete brauseri aknas kuvati faili mockServiceWorker.js sisu? Tähendab kõik on suurepärane, läheme edasi.

Järgmisena loome kaustas src kausta api ja selles faili server.js, kus kirjutame serveri koodi. Nüüd avame server.js ja impordime sellesse funktsiooni setupWorker paigaldatud msw teegist:

import { setupWorker } from 'msw/browser'

Allpool failis loome muutuja worker ja ekspordime selle:

export const worker = setupWorker()

Nüüd avame faili main.jsx ja impordime sinna oma workeri:

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

Nüüd ühendame selle oma rakendusega. Selleks ümbritseme koodi, millega loome oma React rakenduse juure, funktsiooniga, nimetame selle main ja lisame selle esimesele reale workeri käivitamise funktsiooni. Muidugi ei unusta kutsuda ka main ise. Terve kood pärast kõiki importimise ridu näeb nüüd välja selline:

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

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

main()

Nüüd oleme kindlad, et meie rakendus ei hakka tööle enne (ja saatma päringuid ;) ), kui worker käivitub.

Käivitame oma rakenduse ja avame brauseris arendajakonsooli. Kui te näete seal teksti '[MSW] Mocking enabled.', siis olete tubli ja paigaldasite kõik õigesti!!!

Avage oma õpilaste rakendus. Pärast selle tunni materjali tutvumist paigaldage Mock Service Worker oma rakenduse jaoks.

Looge fail server.js ja selles looge worker. Ühendage worker rakendusega main.js, nagu on näidatud tunnis. Veenduge, et kõik töötab.