Produkto puslapis Redux

Šioje pamokoje sukursime atskirą puslapį konkretaus produkto informacijai pateikti.

Atidarykime mūsų produktų aplikaciją ir aplanke products sukurkime failą ProductPage.jsx. Kaip jūs prisimenate, kiekvienas mūsų produktas turi unikalų id. Dėl šio id mes galėsime sugeneruoti unikalų kiekvieno produkto puslapio URL. Tradiciškai jis atrodys taip: /products/id123. Ir id bus talpinama jo dinaminėje dalyje (pačiu maršrutu mes užsiimsime šiek tiek vėliau).

Taigi, ProductPage.jsx sukurkime tuščią komponentą ProductPage:

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

Pirmiausia, ką mes čia padarysime - panaudosime huką useParams, kad ištrauktume dinaminę URL dalį produkto puslapiui, kuriame mes esame:

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

Toliau pagal gautą id mes ieškosime reikiamo produkto products slaisyje (splice) store, naudodami mums jau pažįstamą huką useSelector:

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

Nepamirškime importuoti abiejų hukų į failą:

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

Jei reikiamo mums produkto nebus (pavyzdžiui, vartotojas įvedė neteisingą adresą), tai mes išvesime informaciją apie tai ekrane. Šiame žingsnyje kodas komponentui ProductPage turėtų atrodyti taip:

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>Tokio produkto nėra</p>
  }
}

Ir mums lieka tik išvesti gautus produkto duomenis išdėstyme:

products/ProductPage.jsxreturn (
  <div>
    <h2>{product.name}</h2>
    <p>Aprašymas: {product.desc}</p>
    <p>Kaina: {product.price}</p>
    <p>Kiekis:{product.amount}</p>
  </div>
)