MSW-ի տեղադարումը Redux-ում սերվերային մասի հետ աշխատելու համար

Նախորդ դասերին մենք կատարեցինք մի քանի լրացուցիչ փոփոխություններ մեր հավելվածում: Այժմ մեզ անհրաժեշտ է հասկանալ սերվերի հետ, որի հետ մեր հավելվածը կփոխանակի տվյալներ:

Իրական սերվեր մենք չենք ունենա, ուստի մենք պարզապես կիմիտացնենք աշխատանքը դրա հետ՝ օգտագործելով հիանալի գործիքը Mock Service Worker-ը: Mock Service Worker (MSW)-ը API իմիտացիայի գործիք է, որը օգտագործում է ստանդարտացված Service Worker API, նախատեսված՝ խափանելու հարցումները ցանցային մակարդակում: 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()

Այժմ մենք վստահ ենք, որ մեր հավելվածը չի սկսի աշխատել նախքան (և չի ուղարկի հարցումներ ;) ), քան worker-ը կգործարկվի:

Եկեք գործարկենք մեր հավելվածը և բացենք դիտարկիչում մշակողների կոնսոլը: Եթե դուք տեսնում եք դրանում '[MSW] Mocking enabled.' տեքստը, ապա դուք հիանալի եք և ամեն ինչ տեղադրել եք ճիշտ!!!

Բացեք ձեր ուսանողների հավելվածը: Ծանոթանալով այս դասի նյութին, տեղադրեք Mock Service Worker ձեր հավելվածի համար:

Ստեղծեք server.js ֆայլը, և դրա մեջ ստեղծեք worker: Միացրեք worker-ը հավելվածին main.js-ում, ինչպես ցուցադրված է դասում: Համոզվեք, որ ամեն ինչ աշխատում է: