Устаноўка msw для работы з сервернай часткай у Redux

На мінулых заняццях мы зрабілі некалькі дадатковых зменаў у нашым прыкладанні. Цяпер нам неабходна разбярэцца з серверам, з якім наша прыкладанне будзе абменьвацца дадзенымі.

Сапраўднага сервера ў нас не будзе, таму мы проста сімітуем работу з ім, выкарыстоўваючы круты інструмент 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, як паказана ў уроку. Пераканайцеся, што ўсё працуе.