Redux ilova uchun server qismi bilan ishlash uchun msw ni o'rnatish

Oldingi darslarda biz ilovamizda bir nechta qo'shimcha o'zgartirishlar qildik. Endi ilovamiz ma'lumot almashadigan server bilan tanishishimiz kerak.

Bizda haqiqiy server bo'lmaydi, shuning uchun biz faqat uning ishlashini Mock Service Worker dan foydalanib imitatsiya qilamiz. Mock Service Worker (MSW) - bu API ni imitatsiya qilish vositasi bo'lib, tarmoq darajasida so'rovlarni ushlab qolish uchun mo'ljallangan standartlashtirilgan Service Worker API dan foydalanadi. MSW bizning so'rovlarimiz (requests) uchun soxta javoblar (responses) yaratadi. Bundan tashqari, ishlab chiquvchilar ta'kidlashicha, bu vosit shu qadar samarali va moslashuvchiki, mocklar bilan tuzatish ishlaridan so'ng (ular uchun ilovada maxsus narsa yaratish shart emas), ilovani allaqachon haqiqiy tashqi server bilan ishga tushirish mumkin. Uning hujjatlari keng qamrovli va, agar siz MSW dan qiziqsangiz, uni rasmiy saytda o'qishingiz mumkin.

Keling, msw ni o'rnatishga o'tamiz. Buning uchun mahsulotlar loyihamizni ochamiz va terminalda quyidagi buyruqni kiritamiz:

npm install msw --save-dev

msw ning ishlashi uchun biz mockServiceWorker.js faylini yaratishimiz va nusxalashimiz kerak biron bir ochiq directoriyaga. Ko'pincha bu public papkasi bo'ladi. Bizda bosh public papkasi bor, keling, uni o'sha joyga nusxalaylik. Buning uchun terminalda quyidagi buyruqni ishga tushiring va keyin public dan foydalanishga rozilik bering:

npx msw init public

Endi public papkasiga ko'ramiz, u yerda yaratilgan mockServiceWorker.js skripti paydo bo'lishi kerak. Endi mahsulotlar ilovamizni ishga tushiramiz va brauzerning manzil satrida http://localhost:5173/mockServiceWorker.js ni kiritamiz (chunki ilovamiz 5173 portida ishlaydi). Brauzer oynasida mockServiceWorker.js faylining tarkibi ko'rinayotganini ko'ryapsizmi? Demak hammasi ajoyib, davom etamiz.

Keyingi qadamda src papkasida api papkasini yaratamiz, uning ichida server.js fayli bo'ladi, unda server kodini yozamiz. Endi server.js ni ochamiz va unda setupWorker funksiyasini o'rnatilgan msw kutubxonasidan import qilamiz:

import { setupWorker } from 'msw/browser'

Faylda quyida worker o'zgaruvchisini yaratamiz va uni eksport qilamiz:

export const worker = setupWorker()

Endi main.jsx faylini ochamiz va unga workerimizni import qilamiz:

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

Endi uni ilovamizga ulaymiz. Buning uchun React ilovamizning ildizini yaratadigan kodni biz funksiya ichiga o'ramiz, uni main deb ataymiz va uning birinchi qatoriga workerni ishga tushirish funksiyasini qo'shamiz. Albatta main ni chaqirishni unutmaymiz. Import qatorlaridan keyingi to'liq kod endi quyidagicha ko'rinadi:

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

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

main()

Endi biz ishonch hosil qildikki, ilovamiz worker ishga tushishidan oldin ishlamaydi (va so'rovlar yubormaydi ;) ).

Keling, ilovamizni ishga tushiramiz va ishlab chiquvchilar konsolini ochamiz. Agar siz unda '[MSW] Mocking enabled.' matnini ko'rsangiz, demak siz a'losiz va hammasini to'g'ri o'rnatdingiz!!!

Talabalar ilovangizni oching. Ushbu dars materiali bilan tanishib chiqqaningizdan so'ng, Mock Service Worker ni o'zingizning ilovangiz uchun o'rnating.

server.js faylini yarating, uning ichida worker yarating. Workerni darsda ko'rsatilganidek, ilovaga main.js da ulang. Hammasi ishlashiga ishonch hosil qiling.