msw-ის დაყენება Redux-ში სერვერული ნაწილის მუშაობისთვის

წინა გაკვეთილებზე ჩვენ განვახორციელეთ რამდენიმე დამატებითი ცვლილება ჩვენს აპლიკაციაში. ახლა ჩვენ გვჭირდება გავერკვიოთ სერვერში, რომელთანაც ჩვენი აპლიკაცია გაცვლის მონაცემებს.

ნამდვილი სერვერი ჩვენ არ გვექნება, ამიტომ ჩვენ უბრალოდ გავიმეორებთ მუშაობას მასთან, გამოვიყენებთ მაგარ ინსტრუმენტს Mock Service Worker. Mock Service Worker (MSW) არის API-ის იმიტაციის ინსტრუმენტი, რომელიც იყენებს სტანდარტულ API Service Worker-ს, რომელიც განკუთვნილია მოთხოვნების ქსელის დონეზე გადასაჭრელად. 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-ში, როგორც ნაჩვენებია გაკვეთილზე. დარწმუნდით, რომ ყველაფერი მუშაობს.