Redux-এ স্লাইস যোগ করা

আমরা আমাদের Redux অ্যাপ্লিকেশন তৈরি করার জন্য প্রাথমিক সরঞ্জামগুলি প্রস্তুত করেছি, এখন আমরা সরাসরি এর উপাদানগুলি বাস্তবায়নের দিকে এগোতে পারি।

এই সেশনে আমরা শুরু করব স্লাইস (slices) ধারণা দিয়ে। Redux অ্যাপ্লিকেশনের একটি গ্লোবাল স্টেট থাকে, যা store-এ সংরক্ষিত থাকে। এই স্টেট স্লাইসে বিভক্ত হয়। মূলত, একটি স্লাইস হল স্টোরের একটি অংশ, যাতে রয়েছে প্রাথমিক স্টেট, রিডিউসার এবং অ্যাকশনের লজিক অ্যাপ্লিকেশনের একটি নির্দিষ্ট অংশের জন্য।

আমাদের অ্যাপ্লিকেশনে পণ্য থাকবে, তদনুসারে প্রথম স্লাইস যেটি আমরা তৈরি করব, তাতে তথ্য থাকবে পণ্য সম্পর্কে। এছাড়াও স্লাইস তৈরি করার সময় রিডিউসার যোগ করা প্রয়োজন, যা jজানে কিভাবে এই তথ্য প্রক্রিয়া করতে হয়।

চলুন src ফোল্ডারে যাই এবং তৈরি করি ফোল্ডার parts, এবং তার ভিতরে ফোল্ডার products - এখানে আমরা রাখব সমস্ত কোড ফাইল যা পণ্য সম্পর্কিত। products ফোল্ডারে আমরা ফাইল তৈরি করব productsSlice.js, এবং তারপর ইম্পোর্ট করব এতে RTK থেকে ফাংশন createSlice, যার সাহায্যে আমরা স্লাইস তৈরি করব:

parts/products/productsSlice.jsimport { createSlice } from '@reduxjs/toolkit'

এখন চলুন পণ্যের জন্য স্লাইস তৈরি করি এবং এটির নাম দিই 'products'। reducers প্রপার্টির জন্য আমরা এখনই খালি কার্লি ব্র্যাকেট রেখে দেব:

parts/products/productsSlice.jsconst productsSlice = createSlice({
  name: 'products',
  initialState,
  reducers: {}
})

আমাদের initialState - স্লাইস স্টেটের প্রাথমিক অবস্থা সংজ্ঞায়িত করাও প্রয়োজন, যা প্রথম অ্যাপ্লিকেশন চালু হওয়ার সময় লোড হবে। এটি লিখব ইম্পোর্টের পরেই এবং স্লাইস তৈরি করার আগে। এটি কয়েকটি অবজেক্ট নিয়ে গঠিত একটি অ্যারে হোক, যাতে পণ্যের ডেটা রয়েছে। প্রতিটি পণ্যের জন্য id, নাম, বিবরণ, মূল্য এবং পরিমাণ উল্লেখ করি:

parts/products/productsSlice.jsconst initialState = [
  {
    id: '1',
    title: 'Product1',
    desc: 'This is an amazing product',
    price: '300',
    amount: '30',
  },
  {
    id: '2',
    title: 'Product2',
    desc: 'This is a nice product',
    price: '700',
    amount: '12',
  },
]

ফাইলের কোডের শেষে আমরা ফাংশনের কাজের ফলাফল থেকে createSlice দ্বারা জেনারেট করা reducer নেব এবং এক্সপোর্ট করব। এটি আমাদের কাজে লাগবে অ্যাপ্লিকেশনের অন্যান্য ফাইলে:

parts/products/productsSlice.jsexport default productsSlice.reducer