Redux-এ reducer এবং action

গত পাঠে আমরা পণ্য যোগ করার ফর্মটি শেষ করেছি এবং এটি মেইন পেজে দেখিয়েছি। কিন্তু এখনও যোগ করা ডেটা সংরক্ষণ করা হচ্ছে না, অন্য কথায়, নতুন পণ্যটি স্টোরে বিদ্যমানগুলিতে যোগ করা হচ্ছে না। আসুন এটি ঠিক করি।

প্রথমে আমাদের পণ্য অ্যাপ্লিকেশনে আমরা productsSlice.jsx ফাইলটি খুলব এবং createSlice-এর জন্য reducer প্রপার্টিতে productAdded ফাংশনটি লিখব, যা তাকে প্রদত্ত বর্তমান স্টেট এবং অ্যাকশনের ভিত্তিতে স্টোরে পণ্য যোগ করার কাজ করবে। উল্লেখ্য, এখানে আমাদের পুরো state পাঠানো হয় না, শুধুমাত্র সেই অংশটি পাঠানো হয় যা পণ্যগুলির জন্য দায়ী (products স্লাইস শুধুমাত্র এই অংশটি জানে)। নতুন পণ্যের অবজেক্টটি action অবজেক্টের payload প্রপার্টিতে থাকবে, যেটি সেভ বাটনে ক্লিক করার সময় ইভেন্ট হ্যান্ডলার দ্বারা তৈরি হবে। ফলস্বরূপ productAdded reducer createSlice-এর কোডে এইরকম দেখাবে:

products/productsSlice.jsconst productsSlice = createSlice({
  name: 'products',
  initialState,
  reducers: {
    productAdded(state, action) {
      state.push(action.payload)
    },
  },
})

আর action-এর কথা কি? টিউটোরিয়ালের একদম শুরুতে আমরা উল্লেখ করেছিলাম যে action হল একটি ঘটনা, যা একটি অবজেক্ট আকারে উপস্থাপিত হয়, যা অ্যাপ্লিকেশনে কি ঘটেছে তা বর্ণনা করে। আমরা এটাও বলেছিলাম যে action creator ফাংশন ব্যবহার করা যেতে পারে, যা আমাদের জন্য এরকম একটি অবজেক্ট তৈরি করবে, উদাহরণস্বরূপ এভাবে:

jsxconst addProduct = newProduct => {
  return {
    type: 'products/productAdded',
    payload: newProduct
  }
}

ভাল খবর হল, আমাদের কিছু করতে হবে না, এবং এটি আমাদের জন্য করে দেবে createSlice ফাংশন, যা আমরা ব্যবহার করি। আমরা একবার reducer লিখলে, এটি স্বয়ংক্রিয়ভাবে আমাদের জন্য একই নামের একটি action creator তৈরি করবে। আমাদের শুধুমাত্র কম্পোনেন্টগুলিতে আরও ব্যবহারের জন্য প্রাপ্ত action creator-টি এক্সপোর্ট করতে হবে। চলুন ফাইলের শেষে reducer এক্সপোর্ট করার আগে এটি করি, এভাবে:

products/productsSlice.jsexport const { productAdded } = productsSlice.actions
export default productsSlice.reducer