Инсталација на msw за работа со серверскиот дел во Redux

На претходните предавања направивме неколку дополнителни промени во нашата апликација. Сега ни е потребно да се справиме со серверот, со кој нашата апликација ќе разменува податоци.

Вистински сервер нема да имаме, затоа ние едноставно ќе ја имитираме работата со него, користејќи одличен алатка Mock Service Worker. Mock Service Worker (MSW) е алатка за имитирање на API, која користи стандардизиран API Service Worker, наменет за пресретнување на барања на мрежно ниво. MSW ќе генерира лажни одговори (responses) на нашите барања (requests). Притоа, како што тврдат развивачите, алатката е толку ефикасна и флексибилна што после отстранување грешки со mock-ови (за кои во апликацијата ништо посебно не е потребно да се креира), апликацијата може да се стави во работа со веќе вистински надворешен сервер. Документацијата за неа е прилично обемна, и, ако се заинтересирате за 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()

Сега сме сигурни дека нашата апликација нема да почне да работи порано (и да испраќа барања ;) ), отколку што ќе се стартува worker-от.

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

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

Креирајте датотека server.js, а во неа креирајте worker. Поврзете го worker-от со апликацијата во main.js, како што е прикажано во лекцијата. Проверете, дека сè работи.