Страница за производ у 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>
)