Redux-тегі өнім беті

Осы сабақта біз нақты бір өнім туралы ақпаратты шығару үшін жеке бет жасаймыз.

Өнімдерімізбен жұмыс істейтін қолданбаны ашып, products бумасында ProductPage.jsx файлын жасаймыз. Есіңізде болса, әрбір өнімімізде бірегей id бар. Осы id арқасында әрбір өнім үшін бірегей URL жасай аламыз. Дәстүрлі түрде ол /products/id123 деп көрінеді. Және id оның динамикалық бөлігінде болады (біз маршрутпен сәл кейінірек айналысамыз).

Ендеше, ProductPage.jsx файлында біз ProductPage бос компонентін жасаймыз:

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

Біз бұл жерде алдымен useParams хукін пайдаланып, біз тұрған өнім бетінің URL адресінің динамикалық бөлігін аламыз:

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>Мұндай өнім жоқ</p>
  }
}

Және бізге алынған өнім деректерін версткада шығару ғана қалады:

products/ProductPage.jsxreturn (
  <div>
    <h2>{product.name}</h2>
    <p>Сипаттама: {product.desc}</p>
    <p>Бағасы: {product.price}</p>
    <p>Саны:{product.amount}</p>
  </div>
)