Redux-এ সার্ভার সাইডের সাথে কাজ করার জন্য MSW ইনস্টল করা

গত কয়েকটি লেসনে আমরা আমাদের অ্যাপ্লিকেশনে কিছু অতিরিক্ত পরিবর্তন করেছি। এখন আমাদের সার্ভার নিয়ে কাজ করতে হবে, যার সাথে আমাদের অ্যাপ্লিকেশন ডেটা বিনিময় করবে।

আমাদের কাছে কোনও আসল সার্ভার থাকবে না, তাই আমরা শুধু এর কাজ অনুকরণ করব, ব্যবহার করে দারুণ একটি টুল Mock Service Worker. Mock Service Worker (MSW) হলো API মকিং এর একটি টুল যা স্ট্যান্ডার্ডাইজড API Service Worker ব্যবহার করে, যা নেটওয়ার্ক লেভেলে রিকোয়েস্ট ইন্টারসেপ্ট করার জন্য ডিজাইন করা। MSW আমাদের রিকোয়েস্ট (requests) এর জন্য নকল রেসপন্স (responses) জেনারেট করবে। এবং, ডেভেলপাররা দাবি করেন যে, টুলটি এতটাই কার্যকরী এবং নমনীয় যে মকগুলোর সাথে ডিবাগ করার পর (যার জন্য অ্যাপ্লিকেশনে কোনও বিশেষ কিছু তৈরি করার প্রয়োজন নেই), অ্যাপ্লিকেশনটি ইতিমধ্যেই আসল এক্সটার্নাল সার্ভারের সাথে কাজে লাগানো যেতে পারে। এর ডকুমেন্টেশন বেশ বিস্তৃত, এবং, যদি আপনি 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 ফাইলটি খুলুন এবং এতে আমাদের ওয়ার্কার ইম্পোর্ট করি:

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

এখন এটিকে আমাদের অ্যাপ্লিকেশনের সাথে সংযুক্ত করি। এর জন্য যে কোড দিয়ে আমরা React অ্যাপ্লিকেশনের রুট তৈরি করি, আমরা এটিকে একটি ফাংশনে র্যাপ করব, এর নাম দিই main এবং এর প্রথম লাইনে ওয়ার্কার চালু করার জন্য ফাংশন যোগ করি। অবশ্যই ভুলবেন না 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()

এখন আমরা নিশ্চিত যে আমাদের অ্যাপ্লিকেশন এর আগে কাজ শুরু করবে না (এবং রিকোয়েস্ট পাঠাবে না ;) ), যতক্ষণ না ওয়ার্কার চালু হয়।

চলুন আমাদের অ্যাপ্লিকেশনটি রান করি এবং ব্রাউজারে ডেভেলপার কনসোল খুলি। যদি আপনি এতে টেক্সট দেখতে পান '[MSW] Mocking enabled.', তাহলে আপনি খুব ভালো এবং সবকিছু সঠিকভাবে ইনস্টল করেছেন!!!

আপনার স্টুডেন্ট অ্যাপ্লিকেশনটি খুলুন। এই পাঠের উপাদানটি দেখে নেওয়ার পরে, আপনার অ্যাপ্লিকেশনের জন্য Mock Service Worker ইনস্টল করুন।

server.js ফাইল তৈরি করুন, এবং এতে একটি ওয়ার্কার তৈরি করুন। worker টিকে অ্যাপ্লিকেশনের সাথে সংযুক্ত করুন main.js তে, যেমন পাঠে দেখানো হয়েছে। নিশ্চিত হন, যে সবকিছু কাজ করছে।