Redux үчүн сервердик бөлүгүндө иштөө үчүн msw орнотуу

Өткөн сабактарда биз колдонмобузда бир нече кошумча өзгөртүүлөрдү жасадык. Эми биз колдонмобуз маалымат алмашкан сервер менен таанышышыбыз керек.

Бизде чыныгы сервер болбойт, ошондуктан биз анын ишин жалган түрдө тарбиялайбыз, колдонуу менен сонун курал Mock Service Worker. Mock Service Worker (MSW) - бул API тарбиялоо үчүн курал, ал колдонулат стандартталган API Service Worker, тармактык деңгээлде сурамдарды кармоо үчүн. MSW биздин сурамдарга жалган жоопторду (responses) түзөт (requests). Андан сырткары, иштеп чыгуучулар айткандай, курал ушунчалык натыйжалуу жана ийкемдүү, кийин моктор менен оңдоодон кийин (колдонмодо атайын эч нерсе түзүлүшү керек эмес), колдонмону чыныгы сырткы сервер менен иштөөгө коё аласыз. Анын документтери анчалык кенен, эгерде сиз MSW менен кызыксаңыз, аны окусаңыз болот расмий сайтта.

Келгиле msw орнотууга өтөлү. Үчүн бул биздин продуктулар проекттин ачып жана терминалга киргизели:

npm install msw --save-dev

msw иштеши үчүн бизге ошондой эле түзүп жана көчүрүү керек mockServiceWorker.js кандайдыр бир жарыяланган директорияга. Көбүнчө бул папка 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 файлын ачалы жана ага воркерибизди импорттойбуз:

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

Эми аны биздин колдонмого кошолу. Үчүн код, менен биз React колдонмосунун тамырын түзөбүз, аны функцияга ороп коёбуз, атап коёбуз main жана биринчи сабына ага воркер үчүн иштөө функциясын кошобуз. Албетте унутпайбыз 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()

Эми биз ишеничтүүбүз, биздин колдонмо иштеп баштабайт мурда (жана сурамдар жөнөтөт ;) ), воркер иштеп баштаганга чейин.

Келгиле колдонмобузду иштетели жана ачылы браузерде иштеп чыгуучулар үчүн консоль. Эгерде сиз анда текстти көрсөңүз '[MSW] Mocking enabled.', анда сиз суперсиз жана баарын орноттуңуз туура!!!

Студенттер менен колдонмонузду ачыңыз. Бул сабактын материалы менен таанышкандан кийин, Mock Service Worker сиздин колдонмоңуз үчүн орнотуңуз.

server.js файлын түзүңүз, ал жерде воркер түзүңүз. worker колдонмого кошуңуз main.js, сабакта көрсөтүлгөндөй. Бардыгы иштеп жатканына ишенүү.