Instalimi i MSW për të punuar me pjesën e serverit në Redux

Në mësimet e mëparshme ne bëmë disa ndryshime shtesë në aplikacionin tonë. Tani na duhet të merremi me serverin, me të cilin aplikacioni ynë do të shkëmbejë të dhëna.

Meqë nuk do të kemi një server të vërtetë, ne thjesht do të simulojmë punën me të, duke përdorur mjetin e shkëlqyer Mock Service Worker. Mock Service Worker (MSW) është një mjet për imitimin e API, i cili përdor një API të standardizuar të Service Worker, i krijuar për të ndërthurur kërkesat në nivel rrjeti. MSW do të gjenerojë përgjigje të rreme (responses) ndaj kërkesave tona (requests). Për më tepër, sipas zhvilluesve, ky mjet është kaq efektiv dhe fleksibël saqë pas debugimit me mock (për të cilët në aplikacion nuk kërkohet të krijohet asgjë e veçantë), aplikacioni mund të vërë në punë me një server të vërtetë të jashtëm. Dokumentacioni për të është mjaft i gjerë, dhe, nëse ju intereson MSW, mund ta lexoni në faqen zyrtare.

Le të kalojmë në instalimin e msw. Për këtë, hapni projektin tonë me produktet dhe në terminal shkruani:

npm install msw --save-dev

Që msw të funksionojë na duhet gjithashtu të krijojmë dhe kopjojmë mockServiceWorker.js në një drejtori publike. Shpesh kjo është dosja public. Ne kemi një dosje të zbrazët public, le ta kopjojmë atje. Për këtë, ekzekutoni në terminal komandën dhe më pranoni përdorimin e public:

npx msw init public

Tani le të shohim në public, aty duhet të shfaqet skripti i gjeneruar mockServiceWorker.js. Tani nise aplikacionin tonë me produktet dhe në shiritin e adresave të shfletuesit shkruani http://localhost:5173/mockServiceWorker.js (pasi aplikacioni ynë punon në portin 5173). E shihni në dritaren e shfletuesit u shfaq përmbajtja e skedarit mockServiceWorker.js? Do të thotë se gjithçka është në rregull, vazhdojmë më tej.

Më pas le të krijojmë në dosjen src një dosje api, dhe brenda saj skedarin server.js, ku do të shkruajmë kodin e serverit. Tani hapni server.js dhe importoni në të funksionin setupWorker nga biblioteka e instaluar msw:

import { setupWorker } from 'msw/browser'

Më poshtë në skedar krijojmë variablin worker dhe eksportojmë atë:

export const worker = setupWorker()

Tani le të hapim skedarin main.jsx dhe të importojmë në të workerin tonë:

import { worker } from './api/server'

Tani le ta lidhim atë me aplikacionin tonë. Për këtë, kodin me të cilin krijojmë rrënjën e aplikacionit tonë React, do ta mbështjellim në një funksion, do ta quajmë atë main dhe në rreshtin e parë do të shtojmë në të funksionin e nisjes për workerin. Sigurisht mos harroni të thirrni edhe vetë main. Kodi i plotë pas të gjitha rreshtave me import tani do të duket kështu:

async function main() {
	await worker.start({ onUnhandledRequest: 'bypass' })

	ReactDOM.createRoot(document.getElementById('root')).render(
		<React.StrictMode>
			<Provider store={store}>
				<App />
			</Provider>
		</React.StrictMode>
	)
}

main()

Tani jemi të sigurtë se aplikacioni ynë nuk do të fillojë të punojë më parë (dhe të dërgojë kërkesa ;) ), se sa niset workeri.

Le të nisim aplikacionin tonë dhe të hapim në shfletues konsolën për zhvilluesit. Nëse shihni në të tekstin '[MSW] Mocking enabled.', ateherë ju jeni të shkëlqyer dhe keni instaluar gjithçka si duhet!!!

Hapni aplikacionin tuaj me studentët. Pasi të njiheni me materialin e këtij mësimi, instaloni Mock Service Worker për aplikacionin tuat.

Krijoni skedarin server.js, dhe në të krijoni workerin. Lidheni workerin me aplikacionin në main.js, siç tregohet në mësim. Sigurohuni që gjithçka funksionon.