MSW diegimas darbui su serverio puse Redux

Ankstesnėse pamokose mes atlikome keletą papildomų pakeitimų mūsų programoje. Dabar mums reikia susidoroti su serveriu, su kuriuo mūsų programa keisis duomenimis.

Tikro serverio mes neturėsime, todėl mes tiesiog imituosime darbą su juo, naudodami šaunų įrankį Mock Service Worker. Mock Service Worker (MSW) yra API imitavimo įrankis, kuris naudoja standartizuotą Service Worker API, skirtą užklausų perėmimui tinklo lygmenyje. MSW generuos fiktyvius atsakymus (responses) į mūsų užklausas (requests). Be to, kaip teigia kūrėjai, įrankis toks efektyvus ir lankstus, kad po derinimo su maketais (kuriems programoje nereikia kurti nieko specialaus), programą galima paleisti į darbą su jau tikru išoriniu serveriu. Dokumentacija jam gana plati ir, jei jūs susidomėsite MSW, galite ją perskaityti oficialioje svetainėje.

Pereikime prie msw diegimo. Tam atidarykime savo produktų projektą ir terminale įveskime:

npm install msw --save-dev

Kad msw veiktų, mums taip pat reikia sukurti ir nukopijuoti mockServiceWorker.js į kokią nors viešą direktoriją. Dažnai tai yra public aplankas. Mes turime tuščią public aplanką, tiesiog nukopijuokime jį ten. Tam paleiskite terminale komandą ir tada sutikite su public naudojimu:

npx msw init public

Dabar pažiūrėkime į public, ten turėtų pasirodyti sugeneruotas scenarijus mockServiceWorker.js. Dabar paleiskime mūsų produktų programą ir adreso eilutėje naršyklės įveskime http://localhost:5173/mockServiceWorker.js (kadangi mūsų programa veikia 5173 prievade). Ar matote naršyklės lange atvaizduojamą failo mockServiceWorker.js turinį? Puiku, einame toliau.

Toliau src aplanke sukurkime aplanką api, o jame failą server.js, kuriame rašysime serverio kodą. Dabar atidarykime server.js ir importuokime į jį funkciją setupWorker iš įdiegtos msw bibliotekos:

import { setupWorker } from 'msw/browser'

Žemiau faile sukurkime kintamąjį worker ir eksportuokime jį:

export const worker = setupWorker()

O dabar atidarykime failą main.jsx ir importuokime į jį mūsų worker'į:

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

Dabar prijunkime jį prie mūsų programos. Tam kodą, kuriuo mes sukuriame mūsų React programos šaknį, apvyniokime į funkciją, pavadinkime ją main ir pirmoje eilutėje pridėkime į ją worker'io paleidimo funkciją. Žinoma, nepamirškime iškviesti ir pačios main. Pilnas kodas po visų importavimo eilučių dabar atrodys taip:

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

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

main()

Dabar esame tikri, kad mūsų programa nepradės veikti anksčiau (ir siųsti užklausų ;) ), nei pasileis worker'is.

Paleiskime mūsų programą ir atidarykime naršyklės kūrėjų konsolę. Jei matote joje tekstą '[MSW] Mocking enabled.', tai jūs šaunūs ir viską įdiegėte teisingai!!!

Atidarykite savo studentų programą. Susipažinę su šios pamokos medžiaga, įdiekite Mock Service Worker savo programai.

Sukurkite failą server.js, o jame sukurkite worker'į. Pridėkite worker'į prie programos main.js, kaip parodyta pamokoje. Įsitikinkite, kad viskas veikia.