Инсталиране на 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, както е показано в урока. Уверете се, че всичко работи.