Πολυπλάσια χρήση δεδομένων από ένα slice στο Redux

Στο προηγούμενο μάθημα, προσθέσαμε στη φόρμα προσθήκης προϊόντος ένα ακόμη πεδίο με μια αναπτυσσόμενη λίστα για την επιλογή του πωλητή που το δημοσιεύει. Ας υποθέσουμε ότι τώρα χρειάζεται να εμφανίσουμε αυτήν την πληροφορία σε αρκετά ακόμη σημεία της εφαρμογής. Για αυτό, δεν θα αντιγράφουμε τον κώδικα κάθε φορά, αλλά απλά θα δημιουργήσουμε ένα ξεχωριστό component, στο οποίο θα ανακτούμε τα δεδομένα από το slice και θα τα εμφανίζουμε στα μέρη της εφαρμογής που χρειαζόμαστε.

Ας ανοίξουμε την εφαρμογή μας με τα προϊόντα. Ας δημιουργήσουμε τώρα στον φάκελο products ένα ακόμη αρχείο SellerOfProd.jsx. Αρχικά, ας εισάγουμε το hook useSelector, με τη βοήθεια του οποίου θα παίρνουμε το slice με το απαιτούμενο προϊόν:

import { useSelector } from 'react-redux'

Στη συνέχεια, ας ανακτήσουμε από το store το απαιτούμενο προϊόν με βάση το id του πωλητή, το οποίο θα μεταβιβάζουμε στο νέο μας component μέσω των props:

export const SellerOfProd = ({ sellerId }) => {
	const seller = useSelector((state) =>
		state.sellers.find((seller) => seller.id === sellerId)
	)
}

Και σε περίπτωση που υπάρχει αυτός ο πωλητής, θα επιστρέφουμε το όνομά του, ενώ αν δεν υπάρχει, θα επιστρέφουμε 'unknown':

return <span>by {seller ? seller.name : 'unknown'}</span>

Ας εισάγουμε τώρα το νέο μας component στο ProductsList.jsx και ας το εισάγουμε στη συνάρτηση ProductsList αμέσως μετά τον τίτλο με το όνομα του προϊόντος. Όπως βλέπετε, του μεταβιβάσαμε στα props το id:

<SellerOfProd sellerId={product.seller} />

Τώρα, αν εκκινήσουμε την εφαρμογή μας, προσθέσουμε ένα νέο προϊόν και το βρούμε στη λίστα, θα δούμε ότι έχει εμφανιστεί ο πωλητής του, ενώ για τα προϊόντα που προστέθηκαν αυτόματα κατά την εκκίνηση της εφαρμογής, θα εμφανίζεται 'unknown'.

Μια μικρή παρένθεση: αν το eslint σας στον editor VS Code παραπονιέται για το sellerId, αλλά η εφαρμογή λειτουργεί, μπορείτε προσωρινά να το αγνοήσετε ή να ανοίξετε το αρχείο .eslintrc.cjs της εφαρμογής σας και στις rules να προσθέσετε "react/prop-types": "off".

Εννοείται, ότι θα θέλαμε να προσθέσουμε πληροφορίες για τον πωλητή και στην σελίδα του προϊόντος. Για αυτό, ας εισάγουμε στο markup του ProductPage μετά τον τίτλο με το όνομα του προϊόντος ξανά αυτή τη γραμμή και ας ελέγξουμε ότι όλα λειτουργούν:

<SellerOfProd sellerId={product.seller} />

Ανοίξτε την εφαρμογή σας με τους μαθητές. Μελετώντας το υλικό του μαθήματος, στον φάκελο students δημιουργήστε ένα αρχείο για το component TeacherForStudent. Στο αποτέλεσμα, το component θα πρέπει να επιστρέφει το Ονοματεπώνυμο του καθηγητή, και δίπλα σε παρενθέσεις το μάθημα που διδάσκει. Βρείτε τον απαιτούμενο καθηγητή χρησιμοποιώντας το hook useSelector. Αν ο καθηγητής για αυτόν τον μαθητή απουσιάζει, εμφανίστε 'anonym'.

Με τη βοήθεια του component που λάβατε από την προηγούμενη άσκηση, εμφανίστε τα δεδομένα του καθηγητή για κάθε μαθητή στη σελίδα με τη λίστα των μαθητών.

Κάντε το ίδιο, όπως και στην προηγούμενη άσκηση, αλλά για την ξεχωριστή σελίδα ενός μαθητή.