Redux-এ স্লাইস থেকে ডেটা পুনরায় ব্যবহার করা

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

আমাদের পণ্য সহ অ্যাপ্লিকেশনটি খুলুন। এখন products ফোল্ডারে আরও একটি ফাইল তৈরি করা যাক SellerOfProd.jsx। শুরুতে useSelector হুকটি ইম্পোর্ট করি, যার সাহায্যে আমরা প্রয়োজনীয় পণ্য সহ স্লাইসটি পাব:

products/SellerOfProd.jsximport { useSelector } from 'react-redux'

তারপর store থেকে প্রয়োজনীয় পণ্যটি নিষ্কাশন করি বিক্রেতার id অনুযায়ী, যা আমরা আমাদের নতুন কম্পোনেন্টে props হিসেবে পাঠাব:

products/SellerOfProd.jsxexport const SellerOfProd = ({ sellerId }) => {
  const seller = useSelector((state) =>
    state.sellers.find((seller) => seller.id === sellerId)
  )
}

এবং যদি এমন বিক্রেতা থাকে, আমরা তার নাম ফেরত দেব, আর যদি না থাকে, তাহলে 'unknown' ফেরত দেব:

products/SellerOfProd.jsxreturn <span>by {seller ? seller.name : 'unknown'}</span>

এখন আমাদের নতুন কম্পোনেন্টটি ProductsList.jsx-এ ইম্পোর্ট করা যাক এবং ProductsList ফাংশনে পণ্যের নামের শিরোনামের পরেই এটি বসাই। আপনি দেখতে পাচ্ছেন, আমরা এটিকে props হিসাবে id পাঠিয়েছি:

products/ProductsList.jsx<SellerOfProd sellerId={product.seller} />

এখন,如果我们 আমাদের অ্যাপ্লিকেশন চালু করি, একটি নতুন পণ্য যোগ করি এবং তালিকায় এটি খুঁজে পাই, তাহলে আমরা দেখতে পাব যে এর একটি বিক্রেতা রয়েছে, এবং অ্যাপ্লিকেশন শুরুতে স্বয়ংক্রিয়ভাবে যোগ করা পণ্যগুলির জন্য 'unknown' থাকবে।

একটি ছোট বিচ্যুতি: যদি আপনার VS Code এডিটরে eslint sellerId-এ আপত্তি করে, কিন্তু অ্যাপ্লিকেশন কাজ করে, তাহলে আপনি এটিকে暂时 উপেক্ষা করতে পারেন বা আপনার অ্যাপ্লিকেশনের .eslintrc.cjs ফাইলটি খুলে rules-এ "react/prop-types": "off" যোগ করতে পারেন।

স্বভাবতই, আমরা চাই বিক্রেতার তথ্য পণ্যের পৃষ্ঠাতেও যোগ করতে। এর জন্য ProductPage-এর লেআউটে পণ্যের নামের শিরোনামের পরে আবার এই লাইনটি বসাই এবং পরীক্ষা করে দেখি যে সব কাজ করছে:

products/ProductPage.jsx<SellerOfProd sellerId={product.seller} />