Stranica za proizvod u Redux-u

Na ovoj lekciji ćemo napraviti posebnu stranicu za prikaz informacija o konkretnom proizvodu.

Otvorimo našu aplikaciju sa proizvodima i u folderu products kreirajmo fajl ProductPage.jsx. Kao što se sećate, svaki naš proizvod ima jedinstveni id. Zahvaljujući tom id-u moći ćemo da generišemo jedinstveni URL stranice za svaki proizvod. Tradicionalno će izgledati kao: /products/id123. I id će biti sadržan u njegovom dinamičkom delu (samim rutama ćemo se pozabaviti nešto kasnije).

Dakle, hajde da u ProductPage.jsx kreiramo praznu komponentu ProductPage:

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

Prvo što ćemo uraditi ovde je da iskoristimo huk useParams, da izvučemo dinamički deo URL-a za stranicu proizvoda, na kojoj se nalazimo:

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

Zatim po dobijenom id-u ćemo potražiti potreban proizvod u slice-u products u store-u, koristeći nama već poznati huk useSelector:

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

Ne zaboravimo da importujemo oba huka u fajl:

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

Ako potreban proizvod ne bude pronađen (na primer, korisnik je uneo neispravnu adresu), onda ćemo prikazati informaciju o tome na ekranu. Na ovom koraku kod za komponentu ProductPage bi trebalo da izgleda ovako:

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>Nema takvog proizvoda</p>
  }
}

I ostaje nam samo da prikažemo dobijene podatke o proizvodu u verzstiranju:

products/ProductPage.jsxreturn (
  <div>
    <h2>{product.name}</h2>
    <p>Opis: {product.desc}</p>
    <p>Cena: {product.price}</p>
    <p>Količina:{product.amount}</p>
  </div>
)