Σελίδα για προϊόν στο Redux

Σε αυτό το μάθημα θα δημιουργήσουμε μια ξεχωριστή σελίδα για την εμφάνιση πληροφοριών για ένα συγκεκριμένο προϊόν.

Ας ανοίξουμε την εφαρμογή μας με τα προϊόντα και στο φάκελο products να δημιουργήσουμε το αρχείο ProductPage.jsx. Όπως θυμάστε, κάθε προϊόν μας έχει ένα μοναδικό id. Χάρη σε αυτό το id θα μπορέσουμε να δημιουργήσουμε ένα μοναδικό URL σελίδας για κάθε προϊόν. Παραδοσιακά θα μοιάζει με: /products/id123. Και το id θα περιέχεται στην δυναμική του μέρος (από την ίδια τη διαδρομή θα ασχοληθούμε λίγο αργότερα).

Λοιπόν, ας δημιουργήσουμε στο ProductPage.jsx ένα κενό component ProductPage:

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

Το πρώτο πράγμα που θα κάνουμε εδώ - θα χρησιμοποιήσουμε το hook useParams, για να εξαγάγουμε το δυναμικό μέρος του URL για τη σελίδα του προϊόντος, στην οποία βρισκόμαστε:

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

Στη συνέχεια με βάση το id που λάβαμε θα αναζητήσουμε το απαιτούμενο προϊόν στο slice products στο store, χρησιμοποιώντας το ήδη γνωστό σε εμάς hook useSelector:

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

Ας μην ξεχάσουμε να εισάγουμε και τα δύο hooks στο αρχείο:

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

Εάν το προϊόν που χρειαζόμαστε δεν βρεθεί (για παράδειγμα, ο χρήστης εισήγαγε λανθασμένη διεύθυνση), τότε θα εμφανίσουμε πληροφορίες γι' αυτό στην οθόνη. Σε αυτό το βήμα ο κώδικας για το component ProductPage θα πρέπει να μοιάζει με αυτό:

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>Δεν υπάρχει τέτοιο προϊόν</p>
  }
}

Και μας μένει μόνο να εμφανίσουμε τα δεδομένα που λάβαμε για το προϊόν στο markup:

products/ProductPage.jsxreturn (
  <div>
    <h2>{product.name}</h2>
    <p>Περιγραφή: {product.desc}</p>
    <p>Τιμή: {product.price}</p>
    <p>Ποσότητα: {product.amount}</p>
  </div>
)