Stránka pre produkt v Reduxe

V tejto lekcii vytvoríme samostatnú stránku pre výpis informácií o konkrétnom produkte.

Otvorme našu aplikáciu s produktmi a v priečinku products vytvoríme súbor ProductPage.jsx. Ako si pamätáte, každý náš produkt má unikátne id. Vďaka tomuto id vieme vygenerovať unikátnu URL adresu stránky pre každý produkt. Tradične bude vyzerať ako: /products/id123. A id bude obsiahnuté v jej dynamickej časti (samotným smerovaním sa budeme zaoberať o niečo neskôr).

Takže, v ProductPage.jsx vytvorme prázdnu komponentu ProductPage:

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

Prvá vec, ktorú tu urobíme - využijeme hák useParams, aby sme vytiahli dynamickú časť URL pre stránku produktu, na ktorej sa nachádzame:

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

Ďalej podľa získaného id budeme hľadať potrebný produkt v slice products v store, pomocou nám už známeho hák-u useSelector:

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

Nezabudnime importovať oba háky do súboru:

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

Ak sa nám potrebný produkt nenájde (napríklad, používateľ zadal nekorektnú adresu), tak o tom vypíšeme informáciu na obrazovku. V tomto kroku by mal kód pre komponentu ProductPage vyzerať 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>Žiadny taký produkt</p>
  }
}

A ostáva nám už len vypísať získané dáta produktu do verzu:

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