Redux'теги продукт үчүн баракчасы

Бул сабакта биз белгилүү бир продукт үчүн маалымат чыгаруу үчүн өзүнчө баракча жасайбыз.

Продукттор менен тиркемебизди ачып, products папкасынын ичинде ProductPage.jsx файлын түзөбүз. Эсиңизде болсун, ар бир продукт уникалдуу id'ге ээ. Ушул id'дин жардамы менен ар бир продукт үчүн уникалдуу URL баракчасын түзө алабыз. Адатта ал мындай көрүнөт: /products/id123. Жана id анын динамикалык бөлүгүндө болот (маршрут менен биз кийинчерээк алектенебиз).

Ошентип, ProductPage.jsx ичинде биз бош компонент ProductPage түзөбүз:

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

Бул жерде биринчи жасай турган ишибиз - биз турган продукт баракчасынын динамикалык URL бөлүгүн алуу үчүн useParams хугунан пайдаланабыз:

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>Description: {product.desc}</p>
    <p>Price: {product.price}</p>
    <p>Amount:{product.amount}</p>
  </div>
)