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

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

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

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

products/productsSlice.jsexport const selectAllProducts = (state) => state.products.products

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

products/productsSlice.jsexport const selectProductById = (state, productId) =>
  state.products.products.find((product) => product.id === productId)

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

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

products/ProductsList.jsximport { selectAllProducts } from './productsSlice'

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

products/ProductsList.jsxconst products = useSelector((state) => state.products)

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

products/ProductsList.jsxconst products = useSelector(selectAllProducts)

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

products/ProductPage.jsxconst product = useSelector((state) =>
  state.products.find((product) => product.id === productId)
)

এর দ্বারা:

products/ProductPage.jsxconst product = useSelector((state) => selectProductById(state, productId))

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

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