Tuotesivu Reduxissa

Tällä oppitunnilla teemme erillisen sivun tietyn tuotteen tietojen näyttämiseen.

Avataan tuotesovelluksemme ja luodaan kansioon products tiedosto ProductPage.jsx. Kuten muistat, jokaisella tuotteellamme on yksilöllinen id. Tämän id:n avulla voimme luoda yksilöllisen URL-osoitteen jokaiselle tuotteelle. Perinteisesti se näyttää tältä: /products/id123. Ja id sisältyy sen dynaamiseen osaan (reitityksestä huolehdimme hieman myöhemmin).

Joten, luodaan tiedostoon ProductPage.jsx tyhjä komponentti ProductPage:

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

Ensimmäinen asia, jonka teemme tässä - hyödynnämme useParams -hookkia, jotta saamme dynaamisen osan URL-osoitteesta tuotesivulle, jolla vihtaamme:

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

Seuraavaksi haetaan saadun id:n perusteella oikea tuote products -slicesta storeen, käyttäen jo tuttua useSelector -hookkia:

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

Älä unohda tuoda molemmat hookit tiedostoon:

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

Jos tarvitsemaamme tuotetta ei löydy (esimerkiksi käyttäjä syötti virheellisen osoitteen), näytämme siitä tiedon ruudulla. Tässä vaiheessa ProductPage -komponentin koodin tulisi näyttää tältä:

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>Tällaista tuotetta ei löydy</p>
  }
}

Ja meidän on enää vain näytettävä haetut tuotetiedot käyttöliittymässä:

products/ProductPage.jsxreturn (
  <div>
    <h2>{product.name}</h2>
    <p>Kuvaus: {product.desc}</p>
    <p>Hinta: {product.price}</p>
    <p>Määrä: {product.amount}</p>
  </div>
)