থাঙ্ক ব্যবহার করে Redux-এ পাঠানো POST অনুরোধ প্রক্রিয়াকরণ

আমরা আপনার সাথে সার্ভার থেকে পণ্য এবং বিক্রেতাদের ডেটা পেয়েছি এবং সেগুলি অ্যাপ্লিকেশনে প্রদর্শন করেছি। কিন্তু থাঙ্ক দিয়ে শুধু ডেটা পাওয়াই যায় না, ডেটা পাঠানও যায়। আসুন জেনে নেওয়া যাক কিভাবে এটি করা যায়।

আমরা একটি নতুন পণ্য যোগ করার পরে, এটি আমাদের store-এ থাকে, অর্থাৎ আমাদের অ্যাপ্লিকেশনের ভিতরে। আসুন এটি করা যাক যাতে নতুন পণ্য সার্ভারে সংরক্ষিত হয়।

আসুন সার্ভার দিয়ে শুরু করি। এখানে আমাদের এখন GET নয়, POST অনুরোধ প্রক্রিয়া করতে হবে, কারণ সার্ভারে এখন পণ্যের ডেটা আসবে, যা আমরা সেখানে সংরক্ষণ করব।

আমাদের পণ্য সহ অ্যাপ্লিকেশনটি খুলুন, এবং সেখানে server.js ফাইলটি খুলুন। এতে handlers অ্যারে খুঁজে বের করুন এবং এতে POST অনুরোধের জন্য আরেকটি হ্যান্ডলার যোগ করুন। এখানে আমাদের অনুরোধের বডিও গ্রহণ করতে হবে, তাই কলব্যাকে আমাদের request পাস করতে হবে:

http.post('/fakeServer/products', async ({ request }) => {})

এখন কার্লি ব্র্যাকেটে আমাদের কলব্যাকের কোড লিখি। প্রথমে অনুরোধের ডেটা বের করি এবং ত্রুটির ক্ষেত্রে সার্ভার থেকে একটি প্রতিক্রিয়া পাঠাই যে আমরা ডেটা সংরক্ষণ করতে পারিনি এবং 500 স্ট্যাটাস:

http.post('/fakeServer/products', async ({ request }) => {
	const data = await request.json()

	if (data.content === 'error') {
		await delay(ARTIFICIAL_DELAY_MS)
		
		return new HttpResponse('server save error', {
			status: 500,
			headers: {
				'Content-Type': 'application/json',
			},
		})
	}
})

যদি ডেটা ঠিক থাকে, তাহলে আমরা ডাটাবেসে আমাদের কাছে আসা অনুরোধে প্রাপ্ত id অনুসারে বিক্রেতাকে খুঁজে বের করব এবং এই বিক্রেতাকে data-এ লিখব (সর্বশেষ বিক্রেতার ডেটাও তো সার্ভারে সংরক্ষিত আছে ;) ):

const seller = db.seller.findFirst({
	where: { id: { equals: data.seller } },
})
data.seller = seller

এরপর ডাটাবেসে এর জন্য একটি রিএ্যাকশন অবজেক্ট তৈরি করব পণ্য। এবং এখন, পণ্যের জন্য প্রয়োজনীয় সমস্ত ফিল্ড থাকায়, ডাটাবেসে পণ্যটিও তৈরি করব:

data.reactions = db.reaction.create()
const product = db.product.create(data)

বিলম্ব সেট করি এবং কোডের শেষ লাইনে আমাদের কলব্যাকের জন্য পণ্যসহ একটি প্রতিক্রিয়া ফেরত দিই:

await delay(ARTIFICIAL_DELAY_MS)
return HttpResponse.json(serializeProduct(product))

এটির সাথে আমরা সম্পূর্ণরূপে সার্ভারের কাজ শেষ করলাম এবং আর এতে ফিরে যাব না।

যাইহোক, আরেকটি দরকারী জিনিস। এই লাইনের পরে export const worker = setupWorker(...handlers) আপনি নিম্নলিখিত কোড যোগ করতে পারেন:

worker.listHandlers().forEach((handler) => {
	console.log(handler.info.header)
})

এবং এখন আপনি ব্রাউজার কনসোলে প্রতিটি হ্যান্ডলারের ট্রিগার হওয়ার ফলাফল দেখতে সক্ষম হবেন।

অবশ্যই আমাদের সার্ভারটি আসল নয় এবং যদি আমরা ব্রাউজারে জোরপূর্বক পৃষ্ঠা রিফ্রেশ করি, তাহলে আমাদের সমস্ত নতুন পণ্যের অবজেক্ট অদৃশ্য হয়ে যাবে।

ছাত্রদের সাথে আপনার অ্যাপ্লিকেশন খুলুন। এতে server.js ফাইলটি খুলুন। handlers অ্যারেতে POST অনুরোধ প্রক্রিয়াকরণ যোগ করুন। এই অনুরোধের বডিতে আপনি নতুন যোগ করা ছাত্রের ডেটা গ্রহণ করবেন।

আপনার http.post-এর জন্য কলব্যাকের বডিতে ডেটা আনপ্যাক করুন এবং ত্রুটির ক্ষেত্রে সংশ্লিষ্ট প্রতিক্রিয়া পাঠান।

যদি সব ঠিক থাকে, তাহলে ডাটাবেসে প্রাপ্ত id অনুসারে শিক্ষককে খুঁজে বের করুন এবং তাকে ডেটাতে লিখুন। ডেটাতে, ডাটাবেসের উপর ভিত্তি করে তৈরি অবজেক্ট votes-ও লিখুন।

সংগৃহীত ডেটার উপর ভিত্তি করে একটি অবজেক্ট তৈরি করুন student নতুন ছাত্র সহ এবং সার্ভারের প্রতিক্রিয়ায় এটি পাঠান।