Redux-daky önümiň sahypasy

Bu sapakda kesgitlenen önüm barada maglumat görkezmek üçin aýratyn sahypa dözeris.

Önümler bilen bolan aplikasiýamyzy açalyň we products papkasynyň içinde ProductPage.jsx faýlyny dözeris. Ýatda bolşy ýaly, her önümiziň özboluşly id-si bar. Bu id bilen her önüm üçin özboluşly URL salgysyny dözmäge mümkinçilik alarys. Adaty görnüşde ol şeýle bolar: /products/id123. We id onuň dinamiki böleginde bolar (marsrutyň özi bilen birnäçe wagtdan soň meşgullanarys).

Şeýlelik bilen, geliň ProductPage.jsx faýlynda boş komponent ProductPage dözeris:

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

Bu ýerde ilkinji etjek zadymyz - biz ýerleşýän önüm sahypasynyň URL salgysynyň dinamiki bölegini aýyrmak üçin useParams çeňňeginden peýdalanyp:

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

Indiki etapda alnan id-e görä, biz store-daky products slýasynyň içinde zerur önümi gözläris, tanaşyk bolan useSelector çeňňeginden peýdalanyp:

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

Her iki çeňňegi faýla import etmegi ýatdan çykarma:

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

Eger-de zerur önümimiz ýok bolsa (mysal üçin, ulanyjy nädogry salgy girizse), onda muny ekrana görkezeris. Bu ädimde ProductPage komponenti üçin kod şeýle görünmeli:

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>Şeýle önüm ýok</p>
  }
}

We biz alnan önüm maglumatlaryny sahypanyň görnüşine çykarmak bilen ýeke galýarys:

products/ProductPage.jsxreturn (
  <div>
    <h2>{product.name}</h2>
    <p>Düşündiriş: {product.desc}</p>
    <p>Bahasy: {product.price}</p>
    <p>Mukdary:{product.amount}</p>
  </div>
)