Usanidi msw kwa kufanya kazi na sehemu ya seva katika Redux

Katika masomo yaliyopita tulifanya mabadiliko kadhaa ya ziada katika programu yetu. Sasa tunahitaji kukabiliana na seva, ambayo programu yetu itabadilishana nayo data.

Hatutakuwa na seva halisi, kwa hivyo tutaiga kufanya kazi nayo, kwa kutumia zana bora Mock Service Worker. Mock Service Worker (MSW) ni zana ya kuiga API, ambayo inatumia API sanifu ya Service Worker, iliyokusudiwa kukatiza maombi kwa kiwango cha mtandao. MSW itatengeneza majibu bandia (responses) kwa maombi yetu (requests). Zaidi ya hayo, kama waundevu walivyodai, zana hii ni yenye ufanisi sana na kubadilika, kwamba baada ya kurekebisha na viiga (ambavyo kwenye programu hakuna kitu maalum kinachohitajika kuundwa), programu inaweza kutumika kazi na seva halisi ya nje. Nyaraka kuhusu hii ni kubwa sana, na, ikiwa utapendezwa na MSW, unaweza kuisoma kwenye tovuti rasmi.

Wacha tuendelee kwenye usanidi wa msw. Kwa hili tufungue mradi wetu wa bidhaa na kwenye terminali tuandike:

npm install msw --save-dev

Ili msw ifanye kazi pia tunahitaji kuunda na kunakili mockServiceWorker.js kwenye folda fulani ya umma. Mara nyingi hii ni folda public. Sisi tuna folda tupu public, wacha tunakili hayo huko. Kwa hili anzisha kwenye terminali amri na kisha kubali matumizi ya public:

npx msw init public

Sasa tuangalie kwenye public, kunapaswa kuonekana skripti iliyotengenezwa mockServiceWorker.js. Sasa anzisha programu yetu ya bidhaa na kwenye anwani ya kivinjari tuandike http://localhost:5173/mockServiceWorker.js (kwa kuwa programu yetu inafanya kazi kwenye bandari 5173). Unaona kwenye dirisha la kivinjari yametangazwa yaliyomo ya faili mockServiceWorker.js? Maana yake yote ni mzuri, tuendelee mbele.

Ifuatayo wacha kwenye folda src tuunde folda api, na ndani yake faili server.js, ambayo tutaandika msimbo wa seva. Sasa tufungue server.js na tuingize ndani yake kazi setupWorker kutoka kwenye maktaba iliyosanidiwa ya msw:

import { setupWorker } from 'msw/browser'

Chini kwenye faili tuunde kutofautisha worker na tuitoe nje:

export const worker = setupWorker()

Na sasa wacha tufungue faili main.jsx na tuingize ndani yake mfanyikazi wetu:

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

Sasa tumunganishe kwenye programu yetu. Kwa hili msimbo, ambao tunatumia kuunda mzizi wa programu yetu ya React, tutaifunga kwenye kazi, tuiite main na mstari wa kwanza tuongeze ndani yake kazi ya kuanzisha kwa mfanyikazi. Bila shaka tusisahau kuita na main yenyewe. Msimbo kamili baada ya mistari yote ya uingizaji sasa utaonekana hivi:

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

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

main()

Sasa tuna hakika, kwamba programu yetu haitaanza kufanya kazi kabla (na kutuma maombi ;) ), mfanyikazi hajaanzishwa.

Wacha tuanzishe programu yetu na tufungue kwenye kivinjari konsole kwa wadevu. Kama utaona ndani yake maandishi '[MSW] Mocking enabled.', basi wewe ni mwerevu na umesanidi vyote sawa!!!

Fungua programu yako ya wanafunzi. Ukishasomea nyenzo za somo hili, usanidi Mock Service Worker kwa programu yako.

Unda faili server.js, na ndani yake unda mfanyikazi. Unganisha worker kwenye programu kwenye main.js, kama ilivyoonyeshwa kwenye somo. Hakikisha, kwamba yote yanafanya kazi.