Pagina del prodotto in Redux

In questa lezione creeremo una pagina separata per visualizzare le informazioni su un prodotto specifico.

Apriamo la nostra applicazione di prodotti e nella cartella products creiamo il file ProductPage.jsx. Come ricorderai, ogni nostro prodotto ha un id univoco. Grazie a questo id potremo generare un URL univoco per la pagina di ogni prodotto. Tradizionalmente sarà simile a: /products/id123. E l'id sarà contenuto nella sua parte dinamica (ci occuperemo della route stessa un po' più tardi).

Quindi, in ProductPage.jsx creiamo un componente vuoto ProductPage:

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

La prima cosa che faremo qui è utilizzare l'hook useParams per estrarre la parte dinamica dell'URL per la pagina del prodotto in cui ci troviamo:

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

Successivamente, tramite l'id ottenuto, cercheremo il prodotto corrispondente nello slice products nello store, utilizzando l'hook a noi già familiare useSelector:

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

Non dimentichiamo di importare entrambi gli hook nel file:

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

Se il prodotto di cui abbiamo bisogno non viene trovato (ad esempio, l'utente ha inserito un indirizzo non valido), allora visualizzeremo un messaggio a riguardo sullo schermo. A questo punto il codice per il componente ProductPage dovrebbe apparire così:

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>Nessun prodotto trovato</p>
  }
}

E non ci resta che visualizzare i dati ottenuti del prodotto nel markup:

products/ProductPage.jsxreturn (
  <div>
    <h2>{product.name}</h2>
    <p>Descrizione: {product.desc}</p>
    <p>Prezzo: {product.price}</p>
    <p>Quantità:{product.amount}</p>
  </div>
)