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>
)