Side for produkt i Redux

I denne leksjonen skal vi lage en egen side for å vise informasjon om et spesifikt produkt.

La oss åpne applikasjonen vår med produkter og i mappen products opprette filen ProductPage.jsx. Som du husker, har hvert produkt vårt en unik id. Takket være denne id-en vil vi kunne generere en unik URL for hvert produkt. Tradisjonelt vil den se slik ut: /products/id123. Og id-en vil være inneholdt i dens dynamiske del (selve ruten vil vi ta oss av litt senere).

Så, la oss i ProductPage.jsx opprette en tom komponent ProductPage:

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

Det første vi gjør her er å bruke hooken useParams for å hente ut den dynamiske delen av URL-en for produktsiden vi befinner oss på:

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

Deretter vil vi søke etter det nødvendige produktet i slice products i store, ved å bruke den allerede kjente hooken useSelector:

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

La oss ikke glemme å importere begge hookene i filen:

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

Hvis det ønskede produktet ikke finnes (for eksempel hvis brukeren skrev inn en ugyldig adresse), vil vi vise informasjon om dette på skjermen. På dette stadiet skal koden for komponenten ProductPage se slik ut:

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>Ingent slikt produkt</p>
  }
}

Og da gjenstår det bare å vise den innhentede produktdataen i oppsettet:

products/ProductPage.jsxreturn (
  <div>
    <h2>{product.name}</h2>
    <p>Beskrivelse: {product.desc}</p>
    <p>Pris: {product.price}</p>
    <p>Antall: {product.amount}</p>
  </div>
)