Маҳсулот барои саҳифа дар 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-и гирифташуда мо маҳсулоти заруриро дар порчаи 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>
)