Redux-এ সিলেক্টর পাওয়া

কখনও কখনও অ্যাপ্লিকেশন থেকে অতিরিক্ত কোড দূর করা পাশাপাশি ডেটা এনক্যাপসুলেট করা খুবই উপকারী।

আসুন আমাদের পণ্য সহ অ্যাপ্লিকেশনটি খুলি। খেয়াল করুন যে অ্যাপ্লিকেশনের একাধিক জায়গায় আমরা, সিলেক্টর ব্যবহার করে, পণ্য স্লাইসটি পুনরুদ্ধার করি যাতে এর সাথে কিছু কর্ম করা যায়।

এবং এখন আমরা আমাদের productsSlice.js খুলব, ফাইলের একদম নিচে স্ক্রল করব এবং কয়েকটি লাইন কোড যোগ করব, যেখানে আমরা দুটি সিলেক্টর লিখব এবং এক্সপোর্ট করব। একটি ফাংশন আমাদের সকল পণ্য পাওয়ার জন্য হবে:

export const selectAllProducts = (state) => state.products.products

এবং এর পরে দ্বিতীয়টি - id অনুসারে একটি পণ্য পাওয়ার জন্য:

export const selectProductById = (state, productId) =>
	state.products.products.find((product) => product.id === productId)

অবশ্যই আপনার কাছে একটি যৌক্তিক প্রশ্ন উঠতে পারে - আমাদের এত জটিলতা从哪里来的: state.products.products? উত্তরটি সহজ, আমরা তো গত ক্লাসে স্লাইসের স্ট্রাকচার পরিবর্তন করেছি এবং এখন আমাদের পণ্যগুলি একটি অ্যারের আকারে আলাদা প্রপার্টি products-এ অবস্থান করবে পণ্য স্লাইস state.products-এর মধ্যে (মনে রাখবেন যে এখানে state - এটি Redux-এর রুট স্টেট অবজেক্ট যাতে সমস্ত স্লাইস রয়েছে)।

এইভাবে আমরা কেবল সিলেক্টর ফাংশনগুলির জন্য কোড অ্যাপ্লিকেশনের একটি জায়গায় স্থানান্তরিত করেছি এবং এখন আমাদের সেগুলি ব্যবহার করা的地方সংশ্লিষ্ট পরিবর্তনগুলি আনতে হবে। চলুন শুরু করা যাক ফাইল ProductsList.jsx দিয়ে। এতে ইম্পোর্ট করি selectAllProducts, যেহেতু এখানে আমাদের সমস্ত পণ্য পাওয়ার প্রয়োজন হবে:

import { selectAllProducts } from './productsSlice'

এবং ProductsList ফাংশনের কোডের শুরুতে, আমরা প্রতিস্থাপন করব:

const products = useSelector((state) => state.products)

নিম্নলিখিত লাইনটি দিয়ে:

const products = useSelector(selectAllProducts)

এবং এখন চলুন যাই ProductPage.jsx ফাইলে। এখানে আমাদের id অনুসারে একটি পণ্য প্রয়োজন ছিল। আমরা লাইনটি প্রতিস্থাপন করি (ইম্পোর্ট সম্পর্কে ভুলবেন না):

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

এর দ্বারা:

const product = useSelector((state) => selectProductById(state, productId))

EditProductForm.jsx ফাইলে নিজেই একই রকম প্রতিস্থাপন করুন। এখানে আমাদেরও id অনুসারে একটি পণ্য প্রয়োজন।

মনে রাখবেন, এই ধরনের অপ্টিমাইজেশন শুধুমাত্র আপনার সুবিধার জন্য এবং আপনি এটি করতে পারেন যখন আপনি এটি প্রয়োজনীয় এবং সুবিধাজনক মনে করেন। আর আমাদের উদাহরণে কল্পনা করুন যে আমরা সিলেক্টর ফাংশনের কোড প্রতিবার বিভিন্ন জায়গায় লিখতাম, এবং তারপর স্টেটের স্ট্রাকচার পরিবর্তন করতাম, এবং তখন সব কম্পোনেন্টে এটি সংশোধন করতে হত।

আপনার শিক্ষার্থীদের সাথে অ্যাপ্লিকেশনটি খুলুন। এতে studentsSlice.js ফাইলটি খুলুন। ফাইলের একদম নিচে লিখুন এবং এক্সপোর্ট করুন, যেমন পাঠে দেখানো হয়েছে, দুটি সিলেক্টর সমস্ত শিক্ষার্থী পাওয়ার জন্য selectAllStudents এবং id অনুসারে একজন শিক্ষার্থী পাওয়ার জন্য selectStudentById।

এখন StudentsList.jsx, StudentPage.jsx এবং EditStudentForm.jsx ফাইলগুলিতে selectAllStudents এবং selectStudentById ইম্পোর্ট করুন, এই ফাইলগুলিতে সংশ্লিষ্ট পরিবর্তনগুলি আনুন, যেমন পাঠে দেখানো হয়েছে।