Redux қолдану үшін msw орнату

Алдыңғы сабақтарда біз бірнеше қосымша өзгерістер енгіздік. Енді біз сервермен жұмыс істеуіміз керек, ол біздің қолданбамен деректер алмасады.

Бізде нақты сервер болмайды, сондықтан біз олмен жұмысты Mock Service Worker көмегімен имитациялаймыз. Mock Service Worker (MSW) - бұл стандартталған Service Worker API пайдаланатын API имитациялау құралы, желі деңгейіндегі сұрауларды ұстау үшін жасалған. MSW біздің сұрауларымызға жалған жауаптар (responses) әкеледі. Әрі, әзірлеушілердің айтуынша, бұл құрал соншалықты тиімді және икемді, сондықтан mock-тармен жұмыс істегеннен кейін (олар үшін қолданбада ешқандай арнайы нәрсе жасаудың қажеті жоқ), қолданбаны нақты сыртқы сервермен жұмыс істеуге болады. Оның құжаттамасы әбден кең, егер сіз MSW-ге қызығатын болсаңыз, оны ресми сайттан оқи аласыз.

Енді msw орнатуға көшейік. Ол үшін өнімдер жобамызды ашып, терминалда мынаны енгіземіз:

npm install msw --save-dev

msw жұмыс істеу үшін бізге mockServiceWorker.js файлын жасап, оны қоғамдық директорияға көшіру керек. Бұл көбінесе public бумасы болады. Бізде бос public бумасы бар, оны сол жерге көшірейік. Ол үшін терминалда мынаны істейік:

npx msw init public

Енді public бумасына кірейік, онда mockServiceWorker.js файлы пайда болуы керек. Әрі өнімдер қолдануымызды іске қосып, браузердің адрестік жолына http://localhost:5173/mockServiceWorker.js енгіземіз (себебі біздің қолдануымыз 5173 портында жұмыс істейді). Браузер терезесінде mockServiceWorker.js файлының мазмұны көрініп тұр ма? Сонда бәрі жақсы, жүреміз.

Әрі src бумасында api бумасын жасайық, онда server.js файлын жасаймыз. Әрі server.js ашып, оған msw кітапханасынан setupWorker функциясын импорттаймыз:

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 файлындағы қолдануға қосыңыз. Барлығы жұмыс істеп тұрғанына көз жеткізіңіз.