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

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

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

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

export const ProductPage = () => {}

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

export const ProductPage = () => {
	let params = useParams()
	const { productId } = params
}

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

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

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

import { useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'

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

export 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:

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

Ανοίξτε την εφαρμογή σας με τους μαθητές. Στο φάκελο students δημιουργήστε ένα αρχείο StudentPage.jsx, στο οποίο θα λαμβάνετε και θα εμφανίζετε πληροφορίες για τον επιλεγμένο μαθητή.

Με τη βοήθεια του react-redux hook useSelector λάβετε τις απαραίτητες πληροφορίες για τον μαθητή, όπως φαίνεται στο μάθημα.

Εμφανίστε στο component τις πληροφορίες που λάβατε για τον μαθητή στην οθόνη.