Redux-এ আরেকটি স্লাইস যোগ করা

পূর্ববর্তী ক্লাসে আমরা পণ্যগুলির জন্য products স্লাইস নিয়ে ব্যাপকভাবে কাজ করেছি। একটি বাস্তব Redux অ্যাপ্লিকেশনে, বিভিন্ন উদ্দেশ্যে স্টেটে অনেকগুলি স্লাইস থাকতে পারে। সেইজন্য এই পাঠে আমরা state-এ আরেকটি স্লাইস যোগ করব বিক্রেতাদের জন্য, যারা প্রকৃতপক্ষে আমাদের অ্যাপ্লিকেশনে পণ্য যোগ করবে।

আমাদের পণ্য সহ অ্যাপ্লিকেশনটি খুলুন এবং প্রথম যে কাজটি আমরা করব, তা হল parts ফোল্ডারে আরও একটি ফোল্ডার sellers তৈরি করা, এখানে আমরা সমস্ত কোড এবং কম্পোনেন্ট রাখব, যা বিক্রেতাদের সম্পর্কিত।

এখন, পণ্যগুলির ক্ষেত্রের মতোই, চলুন বিক্রেতাদের জন্য একটি স্লাইস তৈরি করি। প্রথমে sellers ফোল্ডারে একটি ফাইল sellersSlice.js তৈরি করুন এবং এতে createSlice ইম্পোর্ট করুন:

parts/sellers/sellersSlice.jsimport { createSlice } from '@reduxjs/toolkit'

আমরা স্ট্যান্ডার্ড ধাপগুলি অনুসরণ করতে থাকি। স্লাইসের প্রারম্ভিক মান হিসেবে চারজন বিক্রেতা তৈরি করি। সরলতার জন্য তাদের দুটি ফিল্ড থাকবে - id এবং name:

sellers/sellersSlice.jsconst initialState = [
  { id: '0', name: 'Super Power' },
  { id: '1', name: 'Miracle Life' },
  { id: '2', name: 'Dolls&Toys' },
  { id: '3', name: 'Granny' },
]

নীচে createSlice ব্যবহার করে একটি স্লাইস তৈরি করুন sellers, এটিকে প্রারম্ভিক মান পাস করুন। যেহেতু আমরা ভবিষ্যতে বিক্রেতাদের যোগ করব না, বা তাদের ডেটা আপডেট করব না, তাই রিডিউসার সহ ফিল্ডটি খালি থাকতে দিন:

sellers/sellersSlice.jsconst sellersSlice = createSlice({
  name: 'sellers',
  initialState,
  reducers: {},
})

ফাইলের শেষে প্রাপ্ত রিডিউসারের এক্সপোর্ট মনে রাখবেন:

sellers/sellersSlice.jsexport default sellersSlice.reducer

এখন আমাদের app ফোল্ডারে store.js ফাইলটি খুলতে হবে এবং প্রাপ্ত রিডিউসারটি ইম্পোর্ট করতে হবে:

app/store.jsimport sellersReducer from '../parts/sellers/sellersSlice'

এবং তারপর configureStore-এ sellers-এর জন্য রিডিউসার হিসেবে নিযুক্ত করুন:

app/store.jsexport default configureStore({
  reducer: {
    products: productsReducer,
    sellers: sellersReducer,
  },
})