Redux-এ স্টেটের স্ট্রাকচার পরিবর্তন

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

আমাদের পণ্যের অ্যাপ্লিকেশনটি খুলুন, এবং এতে ফাইল productsSlice.js খুলুন। দয়া করে লক্ষ্য করুন initialState-এর সংজ্ঞাটি। প্রাথমিকভাবে আমাদের পণ্যের স্লাইস productsSlice হলো একটি অ্যারে, যার মধ্যে রয়েছে অবজেক্ট (আমাদের ক্ষেত্রে দুটি) পণ্যের ডেটা সহ। প্রথমত, যেহেতু আমরা এখন সেগুলো সার্ভার থেকে লোড করব, তাই আমাদের সেগুলো থেকে সরিয়ে ফেলতে হবে initialState। দ্বিতীয়ত, আমরা সার্ভারে API রিকোয়েস্ট পাঠাব এবং আমাদের জন্য তাদের স্ট্যাটাস জানা গুরুত্বপূর্ণ হবে। এই দুটি বিষয় বিবেচনা করে, আসুন initialState পুনরায় তৈরি করি। এখন এটিকে একটি সাধারণ অবজেক্ট হতে দিন যার ফিল্ডগুলি হলো products (প্রাথমিকভাবে এখানে কোনো ডেটা থাকবে না, শুধু একটি খালি অ্যারে), status এবং error। এখন আমাদের initialState-এর কোডটি হবে একটু ছোট:

const initialState = {
	products: [],
	status: 'idle',
	error: null,
}

আমরা এখন স্ট্যাটাস 'idle' (নিষ্ক্রিয়) সেট করেছি, কারণ প্রাথমিকভাবে আমরা কোনো রিকোয়েস্ট পাঠাই না, এবং সাধারণভাবে এটি পরিবর্তিত হবে এবং মান নিতে পারে যেমন 'লোডিং', 'সম্পন্ন', 'লোডিং ত্রুটি'। মনে রাখবেন, স্ট্যাটাস বোঝাতে আপনি সেই নামগুলি বেছে নিতে পারেন যা আপনার জন্য সুবিধাজনক।

কোডে নিচে নামুন। initialState-এ পরিবর্তনের পর, আমাদের সেই কোডটিও পরিবর্তন করতে হবে, যেখানে আমরা রিডিউসার ফাংশনগুলিতে এই স্টেট নিয়ে কাজ করি। productAdded-এর কোডটি দেখুন:

state.push(action.payload)

এখন নতুন পণ্য আমরা রাখব শুধু পণ্যের state-এ নয়, বরং এর প্রপার্টি state.products-এ। তাই, উপরের লাইনটি প্রতিস্থাপন করি:

state.products.push(action.payload)

তদনুসারে, রিডিউসার reactionClicked-এর জন্যও একই পরিবর্তনগুলি করুন। এর পরিবর্তে:

const currentProduct = state.find((product) => product.id === productId)

এখন হবে:

const currentProduct = state.products.find((product) => product.id === productId)

state-কে state.products দিয়ে প্রতিস্থাপন করুন রিডিউসার productUpdated-এর কোডেও।

আপনার শিক্ষার্থীদের অ্যাপ্লিকেশনটি খুলুন। এতে studentsSlice.js ফাইলটি খুলুন। এখন আপনার initialState-এর যেন তিনটি প্রপার্টি থাকে: students, status, error - পাঠে দেখানো হিসাবে এটি পুনরায় তৈরি করুন।

সংশ্লিষ্ট পরিবর্তনগুলি নিচের কোডেও আনুন। আপনার তিনটি রিডিউসার ফাংশনের কোডে state-কে state.students দিয়ে প্রতিস্থাপন করুন।