Инсталација 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 и увезимо у њега нашог 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()

Сада смо сигурни да наша апликација неће почети да ради пре (и да шаље захтеве ;) ), него што се pokrene worker.

Хајде да покренемо нашу апликацију и отворимо у претраживачу конзолу за програмере. Ако видите у њој текст '[MSW] Mocking enabled.', онда сте супер и све сте инсталирали како треба!!!

Отворите вашу апликацију са студентима. Упознавши се са материјалом ове лекције, инсталирајте Mock Service Worker за вашу апликацију.

Креирајте фајл server.js, а у њему креирајте worker-а. Прикачите worker на апликацију у main.js, као што је приказано у лекцији. Уверите се, да све ради.