Redux иши учун msw сервер томонини ўрнатиш

Ўтган дарсларда биз иловамизда бир нечта қўшимча ўзгартиришлар бажардик. Энди биз илова маълумот алмашадиган сервер билан ишлашни чўзишимиз керак.

Ҳақиқий сервер бизда бўлмагани учун, биз унга ишлашни ёлғонгина симуляция қиламиз, ишлатганда Mock Service Worker деб аталган аъло воситадан фойдаланамиз. Mock Service Worker (MSW) - бу API ни симуляция қилиш учун восита бўлиб, таром даражасидаги сўровларни ушлаш учун ишлаб чиқилган стандартлаштирилган API Service Worker дан фойдаланади. MSW бизнинг сўровларимизга (requests) ёлғон жавоблар (responses) генерация қилади. Шунингдек, ишлаб чиқарувчилар таъкидлаганидек, бу восита judayam самарали ва мослашувчанки, моклар (яъни симуляциялар) билан диагностика қилингандан сўнг (улар учун иловада ҳеч қандай қўшимча нарса яратиш шарт эмас), иловани ҳақиқий ташқи сервер билан ишга тушириш мумкин. Унинг ҳужжатлари judayam кенг, ва агар сиз MSW га қизиқсангиз, уни расмий вебсайтида ўқишингиз мумкин.

Келинг, msw ни ўрнатишга ўтамиз. Буни учун маҳсулотлар билан ишлаётган лойиҳамизни очиб, терминалда куйидагини киритамиз:

npm install msw --save-dev

msw ишлаши учун бизга mockServiceWorker.js ни яратиш ва нусхалаш ҳам керак, уни қандайдир оммавий директорияга joylamoq kerak. Кўпинча бу public папкаси бўлади. Бизда бўш public папкаси бор, келинг уни у ерга нусхалаб оламиз. Буни учун терминалда буйруқни ишга туширинг ва сўнгра public дан фойдаланишга розы бўлинг:

npx msw init public

Энди public га кириб кўрамиз, у ерда яратилган mockServiceWorker.js скрипти пайдо бўлиши керак. Энди маҳсулотлар билан ишлаётган иловамизни ишга туширинг ва браузернинг манзил сатрига http://localhost:5173/mockServiceWorker.js ни киритинг (чунки бизнинг иловамиз 5173 портида ишлайди). Браузер ойнасида mockServiceWorker.js файлининг мундарижаси кўринаётганини кўряпсизми? Демак, ҳаммаси жуда яхши, давом этамиз.

Кейинги қадамда src папкасида api папкасини яратамиз, унинг ичида server.js файлини яратамиз, у ерда сервер кодини ёзамиз. Энди server.js ни очиб, унинг ичига setupWorker функциясини ўрнатилган msw кутухонасидан импорт қиламиз:

import { setupWorker } from 'msw/browser'

Файлда қуйида worker ўзгарувчисини яратамиз ва уни экспорт қиламиз:

export const worker = setupWorker()

Энди main.jsx файлини очиб, унинг ичига бизнинг worker ни импорт қиламиз:

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

Энди уни бизнинг иловамизга улаймиз. Буни учун биз React иловамизнинг илдизини яратиш учун ишлатган кодни, функция ичига оламиз, уни main деб атаймиз ва унинг биринчи сатрига worker ни ишга тушириш учун функция қўшамиз. Албатта main ни чақиришни унутмаймиз. Импортлар билан барча сатрлардан сўнг тўлиқ код энди куйидагича кўринишга эга бўлади:

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

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

main()

Энди биз ишонч ҳосил қиламизки, бизнинг иловамиз (ва сўровлар юбориш ;) ) worker ишга тушаётишидан олдин ишлай бошламайди.

Келинг, иловамизни ишга тушириб, браузерда ишлаб чиқарувчилар учун консольни очайлик. Агар сиз у ерда '[MSW] Mocking enabled.' матнини кўрсангиз, давом этасиз ва ҳаммани тўғри ўрнатдингиз!!!

Ўқувчилар билан ишлаётган иловангизни очинг. Бу дарс материаллари билан танишиб чиққандан сўнг, Mock Service Worker ни ўрнатинг.

server.js файлини яратинг, унга worker яратинг. Worker ни иловага main.js да уланг, дарсда кўрсатилганидек. Ҳаммаси ишлаётганига ишонч ҳосил қилинг.