Страница за продукт в 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 в store, използвайки вече познатия ни хук 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>
)