Pagina pentru produs în Redux

În această lecție vom crea o pagină separată pentru afișarea informațiilor despre un anumit produs.

Să deschidem aplicația noastră cu produsele și în folderul products să creem fișierul ProductPage.jsx. După cum vă amintiți, fiecare produs al nostru are un id unic. Datorită acestui id vom putea genera o adresă URL unică pentru fiecare produs. Tradițional, va arăta astfel: /products/id123. Și id-ul va fi conținut în partea sa dinamică (vom aborda ruta în sine ceva mai târziu).

Deci, să creem în ProductPage.jsx un component gol ProductPage:

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

Primul lucru pe care îl vom face aici - vom folosi hook-ul useParams pentru a extrage partea dinamică a URL-ului pentru pagina produsului pe care ne aflăm:

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

Apoi, folosind id-ul obținut, vom căuta produsul necesar în slice-ul products din store, folosind hook-ul deja cunoscut useSelector:

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

Să nu uităm să importăm ambele hook-uri în fișier:

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

Dacă produsul de care avem nevoie nu este găsit (de exemplu, utilizatorul a introdus o adresă incorectă), atunci vom afișa informații despre aceasta pe ecran. În această etapă, codul pentru componentul ProductPage ar trebui să arate astfel:

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>Nu există un astfel de produs</p>
  }
}

Și ne rămâne doar să afișăm datele obținute ale produsului în marcaj:

products/ProductPage.jsxreturn (
  <div>
    <h2>{product.name}</h2>
    <p>Descriere: {product.desc}</p>
    <p>Preț: {product.price}</p>
    <p>Cantitate: {product.amount}</p>
  </div>
)