Redux অ্যাপ্লিকেশনের জন্য ক্লায়েন্ট

গত কয়েকটি ক্লাসে, আমরা আমাদের অ্যাপ্লিকেশনের সার্ভার সাইডের কাজ প্রায় শেষ করেছি, পরবর্তী পাঠগুলিতে প্রয়োজন অনুযায়ী আমরা এটিকে অল্প কিছুটা সম্পূরক করব। এখন আমাদের অ্যাপ্লিকেশনের জন্য একটি ক্লায়েন্ট তৈরি করা প্রয়োজন, যা সার্ভারে HTTP-রিকোয়েস্ট পাঠাবে।

আমাদের পণ্য সম্পর্কিত অ্যাপ্লিকেশনটি খুলি এবং api ফোল্ডারে client.js ফাইল তৈরি করি। প্রথমে আমরা client ফাংশনটি本身 লিখব, যা GET এবং POST উভয় রিকোয়েস্টের জন্যই কাজ করবে। এটি প্যারামিটার হিসেবে পাথ, রিকোয়েস্টের ধরন এবং রিকোয়েস্ট বডি (POST ক্ষেত্রে) গ্রহণ করবে, যদি থাকে:

export async function client(url, method, body = {}) {}

এরপর আমাদের একটি options অবজেক্ট তৈরি করা প্রয়োজন, যার মাধ্যমে আমরা রিকোয়েস্টের জন্য বিভিন্ন তথ্য পাঠাব। এটা হবে রিকোয়েস্টের ধরন এবং হেডার:

export async function client(url, method, body = {}) {
	const options = {
		method: method,
		headers: {
			'Content-Type': 'application/json',
		},
	}
}

body প্রপার্টিটি আমাদের জন্য ঐচ্ছিক, আমাদের এটি পাঠানো উচিত যদি আমাদের POST-রিকোয়েস্ট হয়। এর জন্য options অবজেক্টের জন্য কোডের পরের client-এর ভিতরে, আমরা options-এ এটি JSON ফরম্যাটে রিকোয়েস্ট বডি সহ যোগ করব, যদি POST মেথড নির্বাচন করা হয়:

if (method === 'POST') {
	options.body = JSON.stringify(body)
}

তারপর client-এর কোডে নীচে, আমরা একটি try ব্লক সংগঠিত করব, যার প্রথম লাইনে fetch ব্যবহার করে সার্ভার থেকে রেসপন্স পাব। ব্যর্থতার ক্ষেত্রে আমরা ঐতিহ্যগতভাবে একটি প্রমিস ত্রুটি সহ রিটার্ন করব:

let data
try {
	const response = await window.fetch(url, options)
} catch (err) {
	return Promise.reject(err.message ? err.message : data)
}

এখন try ব্লকের মধ্যে কোডটি সম্পূর্ণ করি। response পাওয়ার পর, আমাদের এটিকে প্রক্রিয়া করতে হবে। আমরা এটি থেকে JSON-এ ডেটা এক্সট্রাক্ট করব এবং যদি রেসপন্সের স্ট্যাটাস আমাদের সংকেত দেয় যে সবকিছু ঠিক আছে, তাহলে আমরা ডেটা এবং তথ্য সহ একটি অবজেক্ট রিটার্ন করব: স্ট্যাটাস, হেডার এবং অ্যাড্রেস। যদি স্ট্যাটাস 'ok' না হয়, তাহলে আমরা স্ট্যাটাস টেক্সট সহ একটি এক্সসেপশন থ্রো করব:

try {
	const response = await window.fetch(url, options)
	data = await response.json()
	if (response.ok) {
		return {
			status: response.status,
			headers: response.headers,
			url: response.url,
			data,
		}
	}
	throw new Error(response.statusText)
}

client ফাংশনের জন্য কোড আমাদের তৈরি হয়ে গেছে, শুধু আমাদের GET এবং POST মেথডগুলি কল করার সময় কিভাবে কাজ করবে তা লিখতে বাকি। client ফাংশনের পরে তাদের জন্য কোড লিখি। client.get মেথডটি প্যারামিটার হিসেবে পাথ নেবে এবং client ফাংশনকে কল করবে, তাকে এই পাথ এবং GET রিকোয়েস্ট টাইপ পাস করে:

client.get = (url) => client(url, 'GET')

এবং client.post-এর জন্য client-কে পাথ, POST রিকোয়েস্ট টাইপ এবং রিকোয়েস্ট বডি পাস করা উচিত:

client.post = (url, body) => client(url, 'POST', body)

এখানেই শেষ, আমাদের ছোট্ট ক্লায়েন্ট এখন সার্ভারের সাথে কাজ করার জন্য প্রস্তুত।

আপনার শিক্ষার্থীদের সম্পর্কিত অ্যাপ্লিকেশনটি খুলুন, এতে api ফোল্ডারে client.js ফাইল তৈরি করুন। পাঠের উপকরণ পর্যালোচনা করে client ফাংশন এবং এর দুটি মেথড client.get এবং client.post-এর কোড লিখুন (কপি করুন)।