Redux-এ GET-request এর মাধ্যমে সার্ভার থেকে ডেটা প্রেরণ

সুতরাং আমাদের কাছে ডেটাবেসে ডেটা আছে। প্রথম যে কাজটি আমরা আমাদের Redux অ্যাপ্লিকেশন চালু করার সময় করব - তা হল সার্ভার থেকে পণ্যের ডেটা আহরণ করা। এর জন্য আমাদের প্রয়োজন আমাদের অ্যাপ্লিকেশন থেকে একটি GET-request পাঠানো। আসুন এটি সার্ভার সাইডে হ্যান্ডল করি।

আমাদের পণ্য সহ অ্যাপ্লিকেশনটি খুলুন, এবং এটির মধ্যে server.js ফাইলটি খুলুন। HTTP-request নিয়ে কাজ করার জন্য, আমাদের ফাইলে msw থেকে বেশ কয়েকটি টুল ইম্পোর্ট করতে হবে, আসুন এটি করি:

import { http, HttpResponse, delay } from 'msw'

এছাড়াও অবিলম্বে বাস্তবতার জন্য সংশোধন করুন, অর্থাৎ নেটওয়ার্কে সম্ভাব্য বিলম্ব। ধরুন আমাদের কৃত্রিম বিলম্বের মান হবে 2 সেকেন্ড, যাতে আমরা দেখতে পাই কিভাবে ডেটা লোড হয়। এটিকে const PRODS_PER_SELLER = 2-এর পরে লিখুন:

const ARTIFICIAL_DELAY_MS = 2000

এবং এখন ফাইলের শেষে worker এক্সপোর্ট করার আগে API-র জন্য একটি অ্যারে তৈরি করি request হ্যান্ডলার:

export const handlers = []

এবং তারপর বর্গাকার বন্ধনীতে পণ্যের GET-request ইন্টারসেপ্ট করার জন্য প্রথম হ্যান্ডলারটি লিখব:

export const handlers = [http.get()]

http.get-এর জন্য প্রথম প্যারামিটার হিসেবে আমরা পাস করব একটি নকল ঠিকানা, উদাহরণস্বরূপ '/fakeServer/products', এবং দ্বিতীয়টি একটি অ্যাসিঙ্ক্রোনাস callback:

export const handlers = [http.get('/fakeServer/products', async () => {})]

এখন এই callback-এর জন্য কোড লিখি। এর সাহায্যে আমরা ডেটাবেস থেকে সমস্ত পণ্য বের করব। এখানে আমরা serializeProduct ফাংশনটিও ব্যবহার করব, যার কোড আমরা আগের পাঠে লিখেছিলাম। আসুন এটিকে map-এ পাস করি। তারপর একটি বিলম্ব তৈরি করি (যেন নেটওয়ার্ক ধীর) এবং response-এ JSON আকারে পণ্যের ডেটা সহ অবজেক্ট রিটার্ন করি:

export const handlers = [
	http.get('/fakeServer/products', async () => {
		const products = db.product.getAll().map(serializeProduct)
		await delay(ARTIFICIAL_DELAY_MS)
		return HttpResponse.json(products)
	}),
]

এবং শেষ জিনিস। আমরা আমাদের worker-এর জন্য প্রথম handler লিখেছি, আসুন এই worker-কে handlers অ্যারেটি পাস করি। এর জন্য ফাইলের শেষ লাইনটি পরিবর্তন করুন:

export const worker = setupWorker(...handlers)

আপনার শিক্ষার্থীদের সহ অ্যাপ্লিকেশনটি খুলুন, এবং এটির মধ্যে server.js ফাইলটি খুলুন। msw থেকে নির্দেশিত টুলগুলি ফাইলে ইম্পোর্ট করুন। এই পাঠের উপাদান অধ্যয়ন করে, request ইন্টারসেপ্ট করার জন্য হ্যান্ডলারগুলির একটি খালি অ্যারে তৈরি করুন। এতে শিক্ষার্থীদের GET-request হ্যান্ডল করার জন্য কোড লিখুন। পাথ হিসাবে আপনার কাছেই থাকুক '/fakeServer/students'।

ফাইলের শেষে handlers অ্যারেটি worker-কে পাস করতে ভুলবেন না।