Redux-এ অতিরিক্ত রিডিউসার

আসুন আমাদের পণ্য অ্যাপ্লিকেশনটি খুলি, এবং এতে productsSlice.js ফাইলটি। আপনি সম্ভবত খেয়াল করেছেন যে আমরা thunk fetchProducts একটি পৃথক ফাংশন হিসাবে তৈরি করেছি? আমরা এটি এভাবে করেছি কারণ createSlice thunks সংজ্ঞায়িত করা সমর্থন করে না। তাহলে এই ক্ষেত্রে আমরা কীভাবে products স্লাইসের reducer কে সেই অ্যাকশনগুলির প্রতিক্রিয়া জানাতে বাধ্য করব, যা products-এর বাইরে সংজ্ঞায়িত? সর্বোপরি, আমাদের ঠিক সেই অ্যাকশনগুলি প্রক্রিয়া করা দরকার, যা thunk fetchProducts পাঠায়।

এই ধরনের ক্ষেত্রে createSlice-এর extraReducers নামক একটি বৈশিষ্ট্য রয়েছে, যা অতিরিক্ত রিডিউসার যোগ করতে দেয়, যা পরিবর্তে সেই অ্যাকশনগুলি প্রক্রিয়া করবে, যা এই স্লাইসে সংজ্ঞায়িত নয়।

এখন createSlice ফাংশনের 본িতে reducers বৈশিষ্ট্যের পরে সমস্ত রিডিউসার সহ আরও একটি মেথড extraReducers যোগ করা যাক:

extraReducers() {},

আমাদের এই মেথডে একটি অবজেক্ট builder পাস করতে হবে, যার মেথড রয়েছে, যার সাহায্যে অতিরিক্ত রিডিউসার যোগ করা যায়:

extraReducers(builder) {},

আমরা builder-এর একটি মেথড ব্যবহার করব - addCase, যা প্রথম প্যারামিটার হিসেবে একটি action creator নেয়, এবং দ্বিতীয়টি একটি reducer নেয়। fetchProducts দ্বারা প্রেরিত অ্যাকশনগুলির মধ্যে একটি হল fetchProducts.pending, যা আমাদের বলে যে অনুরোধটি পাঠানো হয়েছে। আসুন এই ক্ষেত্রে স্ট্যাটাসটি 'in progress'-এ পরিবর্তন করি (এর আগে এটি 'idle' ছিল):

extraReducers(builder) {
	builder.addCase(fetchProducts.pending, (state) => {
		state.status = 'in progress'
	})
},

এখন সেই অ্যাকশনটি প্রক্রিয়া করা যাক, যা সফল অনুরোধের ক্ষেত্রে প্রেরণ করা হবে। এখানে আমরা শুধুমাত্র স্টেটে স্ট্যাটাস 'success'-এ পরিবর্তন করব না, বরং products স্লাইসে অ্যাকশনের payload থেকে পণ্যগুলিও নিয়ে আসব। সমস্ত পণ্য সংগ্রহ করতে আমাদের concat মেথডের প্রয়োজন হবে:

extraReducers(builder) {
	builder
		.addCase(fetchProducts.pending, (state) => {
			state.status = 'in progress'
		})
		.addCase(fetchProducts.fulfilled, (state, action) => {
			state.status = 'success'
			state.products = state.products.concat(action.payload)
		})
},

ব্যর্থ অনুরোধের ক্ষেত্রে, আমরা স্ট্যাটাসটি 'fail'-এ পরিবর্তন করব এবং স্টেটে ত্রুটির বার্তা লিখব:

.addCase(fetchProducts.rejected, (state, action) => {
	state.status = 'fail'
	state.error = action.error.message
})

যদি আমরা এখন আমাদের অ্যাপ্লিকেশন চালু করি এবং মেনুতে 'Products'-এ ক্লিক করি, তাহলে কয়েক সেকেন্ড পরে (সার্ভারে আমরা যে বিলম্ব সেট করেছি তা মনে আছে?) আমরা পণ্যের তালিকা দেখতে পাব।

আমরা Redux DevTools-এও ঠিক একইভাবে পরিবর্তনগুলি দেখতে পাব। এখন আমাদের পণ্যগুলি স্টেটেও উপস্থিত হবে ('State' ট্যাবটি দেখুন), যদি আপনি products/fetchProducts/fulfilled অ্যাকশনে ক্লিক করেন। সেখানে একটি নতুন স্ট্যাটাস 'success'-ও দেখা যাবে। এখন products/fetchProducts/pending অ্যাকশনে ক্লিক করুন এবং 'State' ট্যাবটি এখন কীভাবে আলাদা হয়েছে তা দেখুন।

একটি মাত্র অপ্রীতিকর মুহূর্ত, যা আপনার ক্ষেত্রে ঘটতে পারে (আমি এটি সম্পর্কে পূর্ববর্তী পাঠে বলেছিলাম) - তা হল ডেটা অনুরোধের নকল করা। যার ফলস্বরূপ, আমাদের তালিকায় 8 টি না হয়ে মোট 16 টি পণ্য হবে এবং ডেভেলপার কনসোলে গুরুতর সতর্কবার্তা দেখা যাবে। আসুন পরবর্তী পাঠে এটি নিয়ে আলোচনা করি।

আপনার শিক্ষার্থীদের অ্যাপ্লিকেশনটি খুলুন। এতে studentsSlice.js ফাইলটি খুলুন। createSlice ফাংশনের 본িতে reducers বৈশিষ্ট্যের পরে extraReducers বৈশিষ্ট্য যোগ করুন। extraReducers মেথডে builder পাস করুন।

builder.addCase মেথড ব্যবহার করে pending, fulfilled এবং rejected অ্যাকশনগুলির জন্য প্রক্রিয়া যোগ করুন, যা fetchStudents ডেটা অনুরোধ করার সময় পাঠায়, যেমন পাঠে দেখানো হয়েছে।