Produkta lapa Redux

Šajā nodarbībā mēs izveidosim atsevišķu lapu, lai parādītu informāciju par konkrētu produktu.

Atveram mūsu lietotni ar produktiem un mapē products izveidosim failu ProductPage.jsx. Kā jūs atceraties, katram mūsu produktam ir unikāls id. Pateicoties šim id, mēs varēsim ģenerēt unikālu URL katra produkta lapai. Tradicionāli tas izskatīsies šādi: /products/id123. Un id būs ietverts tā dinamiskajā daļā (ar pašu maršrutu mēs nodarbosimies nedaudz vēlāk).

Tātad, ProductPage.jsx izveidosim tukšu komponentu ProductPage:

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

Pirmā lieta, ko mēs šeit darīsim - izmantosim hoku useParams, lai iegūtu dinamisko URL daļu produkta lapai, uz kuras mēs atrodamies:

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

Tālāk pēc iegūtā id mēs meklēsim vajadzīgo produktu slice products store, izmantojot mums jau pazīstamo hoku useSelector:

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

Neaizmirsīsim importēt abus hokus failā:

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

Ja vajadzīgā produkta nebūs (piemēram, lietotājs ievadīja nekorektu adresi), tad mēs parādīsim informāciju par to ekrānā. Šajā solī kods komponentam ProductPage izskatīsies šādi:

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>Nav tāda produkta</p>
  }
}

Un mums atliek tikai parādīt iegūtos produkta datus maketā:

products/ProductPage.jsxreturn (
  <div>
    <h2>{product.name}</h2>
    <p>Apraksts: {product.desc}</p>
    <p>Cena: {product.price}</p>
    <p>Daudzums: {product.amount}</p>
  </div>
)