Redux-এ বিক্রেতার পৃষ্ঠা

এখন খুব কমই বাকি আছে। এই সেশনে আসুন শেষ জিনিসটি করি - আমাদের অ্যাপ্লিকেশনে প্রতিটি বিক্রেতার জন্য একটি পৃথক পৃষ্ঠা যোগ করি। এখানে শুধুমাত্র আপনার পরিচিত ক্রিয়াগুলো থাকবে। চলুন শুরু করি।

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

sellers/SellersPage.jsxexport const SellerPage = () => {}

প্রথমে বিক্রেতার id নেওয়া যাক এবং এর মাধ্যমে স্লাইসে প্রয়োজনীয় বিক্রেতার অবজেক্টটি খুঁজে বের করি:

sellers/SellersPage.jsxexport const SellerPage = () => {
  let params = useParams()
  const { sellerId } = params

  const seller = useSelector((state) => selectSellerById(state, sellerId))
}

এরপর নীচের কোডে SellerPage-এর জন্য বিক্রেতা পাওয়ার পর আমরা সমস্ত পণ্য পাব, তারপর সেগুলি থেকে শুধুমাত্র সেই পণ্যগুলি বেছে নেব যা এই বিক্রেতা দ্বারা পোস্ট করা হয়েছে:

sellers/SellersPage.jsxconst productsOfSeller = useSelector((state) => {
  const allProducts = selectAllProducts(state)
  return allProducts.filter((product) => product.seller === sellerId)
})

এবং তারপর নির্বাচিত পণ্যের নাম থেকে map ব্যবহার করে একটি তালিকা তৈরি করব। তাছাড়া এই তালিকায় প্রতিটি পণ্যের নাম হবে সেই পণ্যের পৃষ্ঠায় একটি লিঙ্ক:

sellers/SellersPage.jsxconst productNames = productsOfSeller.map((product) => (
  <li key={product.id}>
    <Link to={`/products/${product.id}`}>{product.name}</Link>
  </li>
))

এবং শেষে SellerPage-এর জন্য কোডে মার্কআপটি রিটার্ন করব: বিক্রেতার নাম সহ একটি শিরোনাম এবং পণ্যের তালিকা যা এই বিক্রেতা পোস্ট করেছে:

sellers/SellersPage.jsxreturn (
  <div>
  <h2>Seller: {seller.name}</h2>

  <ul>{productNames}</ul>
  </div>
)

অবশ্যই আমাদের বিক্রেতা পৃষ্ঠার জন্য একটি রাউট দরকার। আসুন App.jsx ফাইলটি খুলুন এবং এটি চাইল্ড রাউটগুলির শেষে যোগ করুন:

App.jsx{
  path: '/sellers/:sellerId',
  element: <SellerPage />,
},

SellersPage.jsx এবং App.jsx-এ প্রয়োজনীয় হুক এবং কম্পোনেন্টগুলি ইম্পোর্ট করতে ভুলবেন না।

আসুন আমাদের অ্যাপ্লিকেশন চালু করি, পণ্যগুলি লোড করি, তারপর বাম মেনুতে 'Sellers' লিঙ্কে ক্লিক করি। এখন আমরা যেকোনো বিক্রেতার পৃষ্ঠায় যেতে পারি, তার নামে ক্লিক করে, তারপর তার পৃষ্ঠায় তার সমস্ত পণ্য দেখতে পারি। এবং, তার যেকোনো পণ্যে ক্লিক করে, সেই পণ্যের পৃষ্ঠায় যেতে পারি।

এখনই এর জন্য শেষ। আমরা একটি অ্যাপ্লিকেশন তৈরি করতে Redux-এর বেসিক শিখেছি এবং এমনকি একটু গভীরেও গিয়েছি। বিভিন্ন দরকারী টুলের সাথে পরিচিত হয়েছি। আপনার Redux অ্যাপ্লিকেশন তৈরি করতে শুভকামনা!