MSW instalēšana servera daļas darbināšanai Redux

Iepriekšējās nodarbībās mēs veicām vairākas papildu izmaiņas mūsu lietotnē. Tagad mums ir jāizprot ar serveri, ar kuru mūsu lietotne apmainīsies ar datiem.

Mums nebūs īsta servera, tāpēc mēs vienkārši imitēsim darbu ar to, izmantojot foršu rīku Mock Service Worker. Mock Service Worker (MSW) ir rīks API imitēšanai, kas izmanto standartizēto Service Worker API, paredzētu pieprasījumu pieķeršanai tīkla līmenī. MSW ģenerēs fiktīvas atbildes (responses) uz mūsu pieprasījumiem (requests). Turklāt, kā apgalvo izstrādātāji, rīks ir tik efektīvs un elastīgs, ka pēc atkļūdošanas ar maketiem (kuriem lietotnē neprasās neko īpašu izveidot), lietotni var palaist darbā ar jau īstu ārējo serveri. Dokumentācija par to ir diezgan plaša, un, ja jūs ieinteresēsities par MSW, varat to izlasīt oficiālajā vietnē.

Pāriesim pie msw instalēšanas. Lai to izdarītu, atveram mūsu projektu ar produktiem un terminālī ievadām:

npm install msw --save-dev

Lai msw darbotos, mums arī jāizveido un jākopē mockServiceWorker.js kādā publiskā direktorijā. Bieži tā ir mape public. Mums ir tukša mape public, kopēsim to tur. Lai to izdarītu, palaidiet terminālī komandu un pēc tam piekrītiet izmantot public:

npx msw init public

Tagad ieskatīsimies public, tur vajadzētu parādīties ģenerētajam skriptam mockServiceWorker.js. Tagad palaidiet mūsu lietotni ar produktiem un adreses joslā pārlūkprogrammas ievadiet http://localhost:5173/mockServiceWorker.js (tā kā mūsu lietotne darbojas uz 5173 porta). Vai redzat pārlūka logā tika parādīts saturs faila mockServiceWorker.js? Tas nozīmē, ka viss ir lieliski, ejam tālāk.

Tālāk mapē src izveidosim mapi api, un tajā failu server.js, kurā rakstīsim servera kodu. Tagad atveram server.js un importējam tajā funkciju setupWorker no instalētās msw bibliotēkas:

import { setupWorker } from 'msw/browser'

Zemāk failā izveidosim mainīgo worker un eksportēsim to:

export const worker = setupWorker()

Un tagad atveram failu main.jsx un importējam tajā mūsu darbinieku:

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

Tagad pievienosim to mūsu lietotnei. Lai to izdarītu, kodu, ar kuru mēs izveidojam sakni mūsu React lietotnes, mēs ietīsim funkcijā, nosauksim to main un pirmajā rindā pievienosim tai funkciju palašanai darbiniekam. Protams, neaizmirsīsim izsaukt arī pašu main. Pilns kods pēc visām importēšanas rindām tagad izskatīsies šādi:

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

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

main()

Tagad mēs esam pārliecināti, ka mūsu lietotne nesāks darboties pirms (un sūtīs pieprasījumus ;) ), kā darbinies darbinieks.

Palaidiet mūsu lietotni un atveriet pārlūkprogrammas konsoli izstrādātājiem. Ja jūs tajā redzat tekstu '[MSW] Mocking enabled.', tad jūs esat lieliski un visu instalējāt pareizi!!!

Atveriet savu lietotni ar studentiem. Izpētījuši šīs nodarbības materiālu, instalējiet Mock Service Worker savai lietotnei.

Izveidojiet failu server.js, un tajā izveidojiet darbinieku. Pievienojiet worker lietotnei main.js, kā parādīts nodarbībā. Pārliecinieties, ka viss darbojas.