Redux-da mahsulot sahifasi

Ushbu darsda biz ma'lum bir mahsulot haqida ma'lumot chiqarish uchun alohida sahifa yaratamiz.

Mahsulotlar ilovamizni ochamiz va products papkasida ProductPage.jsx faylini yaratamiz. Esingizda bo'lsa, har bir mahsulotimiz noyob id ga ega. Shu id tufayli biz har bir mahsulot uchun noyob URL manzilini yaratishimiz mumkin. An'anaviy tarzda u quyidagicha ko'rinadi: /products/id123. Va id uning dinamik qismida bo'ladi (biz marshrut bilan keyinroq shug'ullanamiz).

Shunday qilib, keling ProductPage.jsx faylida ProductPage bo'sh komponentini yaratamiz:

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

Bu yerda biz qiladigan birinchi ish - biz joylashgan mahsulot sahifasi uchun URL ning dinamik qismini olish uchun useParams hookidan foydalanamiz:

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

Keyin, olingan id bo'yicha biz store dagi products slice ichidan bizga tanish bo'lgan useSelector hook yordamida kerakli mahsulotni qidiramiz:

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

Ikkala hook ni ham faylga import qilishni unutmaymiz:

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

Agar bizga kerakli mahsulot topilmasa (masalan, foydalanuvchi noto'g'ri manzil kiritgan), bu haqda ma'lumotni ekranda chiqaramiz. Ushbu bosqichda ProductPage komponenti uchun kod quyidagicha ko'rinishi kerak:

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>Bunday mahsulot mavjud emas</p>
  }
}

Va bizga faqat olingan mahsulot ma'lumotlarini vebsahifada chiqarish qoladi:

products/ProductPage.jsxreturn (
  <div>
    <h2>{product.name}</h2>
    <p>Tavsif: {product.desc}</p>
    <p>Narx: {product.price}</p>
    <p>Miqdor: {product.amount}</p>
  </div>
)