Stránka pro produkt v Redux

V této lekci vytvoříme samostatnou stránku pro zobrazení informací o konkrétním produktu.

Otevřeme naši aplikaci s produkty a ve složce products vytvoříme soubor ProductPage.jsx. Jak si pamatujete, každý náš produkt má jedinečné id. Díky tomuto id můžeme vygenerovat jedinečnou URL adresu stránky pro každý produkt. Tradičně bude vypadat jako: /products/id123. A id bude obsaženo v její dynamické části (samotnou routou se budeme zabývat o něco později).

Takže, pojďme v ProductPage.jsx vytvořit prázdnou komponentu ProductPage:

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

První věc, kterou zde uděláme - použijeme hook useParams, abychom získali dynamickou část URL pro stránku produktu, na které se nacházíme:

products/ProductPage.jsxexport const ProductPage = () => {
  let params = useParams()
  const { productId } = params
}

Dále podle získaného id budeme hledat požadovaný produkt ve slici products v store, pomocí nám již známého hooku useSelector:

products/ProductPage.jsxconst product = useSelector((state) =>
  state.products.find((product) => product.id === productId)
)

Nezapomeneme importovat oba hooky do souboru:

products/ProductPage.jsximport { useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'

Pokud se požadovaný produkt nenajde (například uživatel zadal neplatnou adresu), zobrazíme na obrazovce informaci o této situaci. V tomto kroku by měl kód pro komponentu ProductPage vypadat takto:

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>Žádný takový produkt</p>
  }
}

A zbývá nám pouze zobrazit získané údaje o produktu ve verzi:

products/ProductPage.jsxreturn (
  <div>
    <h2>{product.name}</h2>
    <p>Popis: {product.desc}</p>
    <p>Cena: {product.price}</p>
    <p>Množství:{product.amount}</p>
  </div>
)