Redux-এ পণ্যের পৃষ্ঠা

এই পাঠে আমরা একটি নির্দিষ্ট পণ্যের তথ্য প্রদর্শনের জন্য একটি পৃথক পৃষ্ঠা তৈরি করব।

আমাদের পণ্য অ্যাপ্লিকেশনটি খুলুন এবং ফোল্ডারে products ফাইল তৈরি করুন ProductPage.jsx। যেমন আপনি মনে রাখবেন, আমাদের প্রতিটি পণ্যের একটি অনন্য id আছে। এই id এর সাহায্যে আমরা প্রতিটি পণ্যের জন্য একটি অনন্য URL তৈরি করতে সক্ষম হব। ঐতিহ্যগতভাবে এটি দেখতে হবে এমন: /products/id123। এবং id থাকবে এর G‡KKvR অংশে (আমরা কিছুক্ষণ পরে রাউটিং নিয়ে কাজ করব)।

সুতরাং, আসুন ProductPage.jsx-এ创建一个 খালি কম্পোনেন্ট ProductPage:

products/ProductPage.jsxexport const ProductPage = () => {}

আমরা এখানে প্রথম যা করব তা হল হুক useParams ব্যবহার করা, যে পণ্য পৃষ্ঠায় আছি তার URL-এর G‡KKvR অংশটি পেতে:

products/ProductPage.jsxexport const ProductPage = () => {
  let params = useParams()
  const { productId } = params
}

এরপর প্রাপ্ত id ব্যবহার করে আমরা store-এ products স্লাইসে প্রয়োজনীয় পণ্যটি খুঁজব, আমাদের পরিচিত হুক useSelector ব্যবহার করে:

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

ফাইলে উভয় হুক ইম্পোর্ট করতে ভুলবেন না:

products/ProductPage.jsximport { useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'

যদি আমাদের প্রয়োজনীয় পণ্য না পাওয়া যায় (উদাহরণস্বরূপ, ব্যবহারকারী একটি ভুল ঠিকানা প্রবেশ করেছে), তাহলে আমরা স্ক্রিনে সে সম্পর্কে তথ্য প্রদর্শন করব। এই পর্যায়ে, ProductPage কম্পোনেন্টের কোডটি এইরকম দেখাবে:

products/ProductPage.jsxexport const ProductPage = () => {
  let params = useParams()
  const { productId } = params

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

  if (!product) {
    return <p>No such product</p>
  }
}

এবং আমাদের শুধুমাত্র প্রাপ্ত পণ্য ডেটা লেআউটে প্রদর্শন করতে হবে:

products/ProductPage.jsxreturn (
  <div>
    <h2>{product.name}</h2>
    <p>Description: {product.desc}</p>
    <p>Price: {product.price}</p>
    <p>Amount:{product.amount}</p>
  </div>
)