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

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

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

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

import { createSlice } from '@reduxjs/toolkit'

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

const initialState = [
	{ id: '0', name: 'Super Power' },
	{ id: '1', name: 'Miracle Life' },
	{ id: '2', name: 'Dolls&Toys' },
	{ id: '3', name: 'Granny' },
]

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

const sellersSlice = createSlice({
	name: 'sellers',
	initialState,
	reducers: {},
})

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

export default sellersSlice.reducer

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

import sellersReducer from '../parts/sellers/sellersSlice'

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

export default configureStore({
	reducer: {
		products: productsReducer,
		sellers: sellersReducer,
	},
})

আপনার শিক্ষার্থীদের সহ অ্যাপ্লিকেশনটি খুলুন। আরও একটি ফোল্ডার teachers তৈরি করুন, এখানে আপনার কাছে শিক্ষকদের সম্পর্কিত কোড সহ ফাইলগুলি থাকবে। এতে একটি ফাইল তৈরি করুন teachersSlice.js। পাঠের উপকরণ ব্যবহার করে, এতে teachers স্লাইস তৈরি করুন createSlice ব্যবহার করে।

প্রতিটি শিক্ষকের ডেটা অবজেক্টে আপনার তিনটি প্রপার্টি থাকবে: id, name (যাতে শেষনাম এবং আদ্যক্ষর থাকবে, উদাহরণস্বরূপ 'পেত্রভ এ.ভি.') এবং বিষয় (যে কোনো একটি, যা মনে আসে - পদার্থবিদ্যা, গণিত, জীববিজ্ঞান ইত্যাদি)। স্লাইসের জন্য প্রারম্ভিক মান হিসেবে ৩টি এমন অবজেক্ট তৈরি করুন।

প্রাপ্ত রিডিউসারটি ইম্পোর্ট করুন teachersReducer কে store.js-এ এবং এটিকে teachers-এর জন্য রিডিউসার হিসেবে নিযুক্ত করুন, যেমন পাঠে দেখানো হয়েছে।