Termékoldal a Redux-ban

Ezen a leckén készítünk egy külön oldalt egy adott termék információinak megjelenítésére.

Nyissuk meg a termékalkalmazásunkat, és a products mappában hozzunk létre egy ProductPage.jsx fájlt. Ahogy emlékszel, minden termékünknek egyedi azonosítója van. Ennek az id-nak köszönhetően tudunk egyedi URL-t generálni minden termékhez. Hagyományosan így fog kinézni: /products/id123. És az id a dinamikus részében fog szerepelni (magával az útvonallal kicsit később foglalkozunk).

Tehát, hozzuk létre a ProductPage.jsx fájlban egy üres ProductPage komponenst:

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

Az első dolog, amit itt teszünk - használjuk a useParams hookot, hogy kinyerjük a dinamikus részt a termékoldal URL-jéből, ahol éppen vagyunk:

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

Ezután a kapott id alapján megkeressük a szükséges terméket a products slice-ban a store-ban, a már jól ismert useSelector hook segítségével:

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

Ne felejtsük el importálni mindkét hookot a fájlba:

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

Ha pedig a szükséges termék nem található (például a felhasználó hibás címet adott meg), akkor erről információt jelenítünk meg a képernyőn. Ezen a ponton a ProductPage komponens kódjának így kell kinéznie:

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>Nincs ilyen termék</p>
  }
}

És már csak a kapott termékadatok megjelenítése van hátra a markup-ban:

products/ProductPage.jsxreturn (
  <div>
    <h2>{product.name}</h2>
    <p>Leírás: {product.desc}</p>
    <p>Ár: {product.price}</p>
    <p>Mennyiség: {product.amount}</p>
  </div>
)