Stran za izdelek v Redux

V tej lekciji bomo naredili ločeno stran za prikaz informacij o določenem izdelku.

Odprimo našo aplikacijo z izdelki in v mapi products ustvarimo datoteko ProductPage.jsx. Kot se spomnite, ima vsak naš izdelek edinstven id. Zahvaljujoč temu id-ju bomo lahko generirali edinstven URL naslov strani za vsak izdelek. Tradicionalno bo videti kot: /products/id123. In id bo vsebovan v njenem dinamičnem delu (s samo potjo se bomo ukvarjali nekoliko kasneje).

Torej, v ProductPage.jsx ustvarimo prazen komponent ProductPage:

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

Prva stvar, ki jo bomo naredili tukaj - uporabili bomo hook useParams, da izvlečemo dinamični del URL-ja za stran izdelka, na kateri smo:

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

Nato bomo po prejetem id-ju poiskali ustrezen izdelek v slice products v store, z uporabo nam že znanega hooka useSelector:

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

Ne pozabimo importati obeh hookov v datoteko:

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

Če želenega izdelka ne najdemo (na primer, uporabnik je vnesel napačen naslov), bomo o tem izpisali informacijo na zaslon. Na tej stopnji naj bi koda za komponent ProductPage izgledala takole:

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>Ni takega izdelka</p>
  }
}

In preostane nam le še, da prejete podatke izdelka prikažemo v razporeditvi:

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>
)