Page pour un produit dans Redux

Dans cette leçon, nous allons créer une page distincte pour afficher les informations d'un produit spécifique.

Ouvrons notre application de produits et dans le dossier products créons le fichier ProductPage.jsx. Comme vous vous en souvenez, chacun de nos produits a un identifiant unique. Grâce à cet id, nous pourrons générer une URL unique pour la page de chaque produit. Traditionnellement, elle ressemblera à : /products/id123. Et l'id sera contenu dans sa partie dynamique (nous nous occuperons de la route elle-même un peu plus tard).

Alors, créons un composant vide ProductPage dans ProductPage.jsx :

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

La première chose que nous ferons ici est d'utiliser le hook useParams pour extraire la partie dynamique de l'URL de la page produit sur laquelle nous nous trouvons :

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

Ensuite, à partir de l'id obtenu, nous chercherons le produit correspondant dans le slice products du store, en utilisant le hook useSelector que nous connaissons déjà :

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

N'oublions pas d'importer les deux hooks dans le fichier :

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

Si le produit dont nous avons besoin n'est pas trouvé (par exemple, si l'utilisateur a saisi une adresse incorrecte), nous afficherons une information à ce sujet sur l'écran. À cette étape, le code pour le composant ProductPage devrait ressembler à ceci :

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>Aucun produit trouvé</p>
  }
}

Et il ne nous reste plus qu'à afficher les données obtenues du produit dans le rendu :

products/ProductPage.jsxreturn (
  <div>
    <h2>{product.name}</h2>
    <p>Description : {product.desc}</p>
    <p>Prix : {product.price}</p>
    <p>Quantité : {product.amount}</p>
  </div>
)