Redux-də server tərəfi ilə iş üçün msw quraşdırılması

Əvvəlki dərslərdə biz tətbiqimizdə bir neçə əlavə dəyişiklik etdik. İndi bizim tətbiqimizin məlumat mübadiləsi aparacağı server ilə tanış olmağa ehtiyac var.

Həqiqi serverimiz olmayacaq, ona görə də biz onunla işi sadəcə təqlid edəcəyik, istifadə edərək əla alət Mock Service Worker. Mock Service Worker (MSW) - API-ni təqlid etmək üçün alətdir ki, şəbəkə səviyyəsində sorğuları əlavə etmək üçün nəzərdə tutulmuş standartlaşdırılmış Service Worker API-dan istifadə edir. MSW bizim sorğularımıza (requests) saxta cavablar (responses) yaradacaq. Üstəlik, inkişaf etdiricilərin dediyinə görə, alət o qədər effektiv və çevikdir ki, moklarla (tətbiqdə onlar üçün xüsusi heç nə yaratmaq tələb olunmur) sazlama apardıqdan sonra, tətbiqi artıq həqiqi xarici server ilə işə buraxa bilərsiniz. Onun sənədləri olduqca genişdir və, əgər siz MSW ilə maraqlansanız, onu rəsmi saytda oxuya bilərsiniz.

Gəlin msw quraşdırmağa keçək. Bunun üçün məhsullar layihəmizi açaq və terminalda daxil edək:

npm install msw --save-dev

msw-nin işləməsi üçün bizim həmçinin yaratmağa və köçürməyə mockServiceWorker.js hansısa ictimai qovluğa ehtiyacımız var. Tez-tez bu public qovluğu olur. Bizim boş public qovluğumuz var, gəlin onu ora köçürək. Bunun üçün terminalda komandanı işə salın və sonra public-in istifadəsinə razılaşın:

npx msw init public

İndi public-ə nəzər salaq, orada yaranmış skript mockServiceWorker.js görünməlidir. İndi məhsullar tətbiqimizi işə salaq və brauzerin ünvan sətrində daxil edək http://localhost:5173/mockServiceWorker.js (çünki bizim tətbiqimiz 5173 portunda işləyir). Brauzerin pəncərəsində mockServiceWorker.js faylının məzmununun göstərildiyini görürsünüz? Deməli hər şey əladır, davam edirik.

Bundan sonra gəlin src qovluğunda api qovluğu yaradaq, onun içində də server.js faylını, hansında ki server kodunu yazacayıq. İndi server.js-i açaq və ona quraşdırılmış msw kitabxanasından setupWorker funksiyasını import edək:

import { setupWorker } from 'msw/browser'

Aşağıda faylda worker dəyişənini yaradaq və onu export edək:

export const worker = setupWorker()

İndi isə gəlin main.jsx faylını açaq və ona workeri import edək:

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

İndi onu tətbiqimizə əlavə edək. Bunun üçün React tətbiqimizin kökünü yaratmaq üçün istifadə etdiyimiz kodu, biz funksiyaya əlavə edəcəyik, onu main adlandıraq və onun içərisində birinci sətirdə workeri işə salmaq funksiyası əlavə edək. Əlbəttə ki özü main-i çağırmağı unutmayaq. Bütün import sətirlərindən sonra tam kod indi belə görünəcək:

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

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

main()

İndi biz əminik ki, bizim tətbiqimiz işləməyə başlamayacaq (və sorğular göndərməyəcək ;) ), worker işə düşməmişdən əvvəl.

Gəlin tətbiqimizi işə salaq və brauzerdə developer konsolunu açaq. Əgər siz orada '[MSW] Mocking enabled.' mətnini görürsünüzsə, onda siz çox yaxşısınız və hər şeyi düzgün quraşdırmısınız!!!

Tələbələr tətbiqinizi açın. Bu dərsin materialı ilə tanış olduqdan sonra, Mock Service Worker-i tətbiqiniz üçün quraşdırın.

server.js faylı yaradın, onun içində də worker yaradın. Workeri tətbiqə main.js-də dərsdə göstərildiyi kimi əlavə edin. Əmin olun ki, hər şey işləyir.