Tootelehe lehekülg Reduxis

Sellel tunnil loome eraldi lehekülje konkreetse toote teabe kuvamiseks.

Avame oma tooterakenduse ja kaustas products loome faili ProductPage.jsx. Nagu te mäletate, on igal meie tootel unikaalne id. Tänu sellele id-le saame luua iga toote jaoks unikaalse URL-i. Traditsiooniliselt näeb see välja järgmine: /products/id123. Ja id sisaldub selle dünaamilises osas (marsruudiga hakkame tegelema veidi hiljem).

Nii et loome failis ProductPage.jsx tühja komponendi ProductPage:

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

Esimene asi, mida me siin teeme - kasutame hook'i useParams, et välja tõmmata tootelehe URL-i dünaamiline osa, kus me asume:

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

Seejärel otsime saadud id põhjal vajaliku toote slices products store'is, kasutades meile juba tuttavat hook'i useSelector:

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

Ärgem unustagem importida mõlemad hook-id faili:

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

Kui aga vajalikku toodet ei leita (näiteks sisestas kasutaja vale aadressi), siis kuvame selle kohta teate ekraanil. Sellel sammul peaks komponendi ProductPage kood välja nägema järgmine:

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>Sellist toodet ei ole</p>
  }
}

Ja meil jääb üle vaid kuvada saadud toode andmed veebilehe kujunduses:

products/ProductPage.jsxreturn (
  <div>
    <h2>{product.name}</h2>
    <p>Kirjeldus: {product.desc}</p>
    <p>Hind: {product.price}</p>
    <p>Kogus:{product.amount}</p>
  </div>
)