Λίστα Πωλητών στο Redux

Στα προηγούμενα μαθήματα ολοκληρώσαμε το κύριο υλικό. Τώρα χρησιμοποιώντας το thunk λαμβάνουμε τη λίστα των προϊόντων από τον server και μπορούμε να αποθηκεύσουμε ένα νέο προϊόν στον server. Ας ασχοληθούμε με τους πωλητές. Εξάλλου, λαμβάνουμε δεδομένα και για αυτούς. Ας φτιάξουμε μια ξεχωριστή σελίδα με τη λίστα των πωλητών.

Ας ανοίξουμε την εφαρμογή μας με τα προϊόντα, και σε αυτήν τον φάκελο sellers. Ας δημιουργήσουμε σε αυτόν τον φάκελο το αρχείο SellersList.jsx. Εδώ θα χρησιμοποιήσουμε το useSelector, το Link και το selectAllSellers, τον κώδικα του οποίου θα γράψουμε στο sellersSlice.js λίγο αργότερα:

import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { selectAllSellers } from './sellersSlice'

Στη συνέχεια, ας δημιουργήσουμε τον ίδιο τον SellersList. Σε αυτόν θα λάβουμε όλους τους πωλητές χρησιμοποιώντας το hook useSelector, μετά θα λάβουμε το markup για τη λίστα των πωλητών σε έναν βρόχο map, και κάθε όνομα πωλητή θα οδηγεί στη δική του σελίδα. Και στο τέλος θα επιστρέψουμε το markup με την επικεφαλίδα και τη λίστα που λάβαμε:

export const SellersList = () => {
	const sellers = useSelector(selectAllSellers)
	const sellersToRender = sellers.map((seller) => (
		<li key={seller.id}>
			<Link to={`/sellers/${seller.id}`}>{seller.name}</Link>
		</li>
	))

	return (
		<div>
			<h2>Sellers:</h2>

			<ul>{sellersToRender}</ul>
		</div>
	)
}

Στη συνέχεια, ας πάμε στο αρχείο sellersSlice.js και κατ' αναλογία με τα selectors στο productsSlice.js ας δημιουργήσουμε στο τέλος του αρχείου δύο selectors μετά την εξαγωγή του reducer:

export const selectAllSellers = (state) => state.sellers

export const selectSellerById = (state, sellerId) =>
state.sellers.find((seller) => seller.id === sellerId)

Τώρα πρέπει να ορίσουμε τη διαδρομή για τη σελίδα με τη λίστα, για αυτό ας ανοίξουμε το αρχείο App.jsx και στον πίνακα με τις θυγατρικές διαδρομές children να προσθέσουμε ακόμη ένα αντικείμενο (μην ξεχάσετε να εισαγάγετε το component SellersList):

{
	path: '/sellers',
	element: <SellersList />,
},

Για να λειτουργήσει ο σύνδεσμος 'Sellers' στο menu, ας πάμε στο αρχείο root.jsx (πόσο καιρό πέρασε... ) και ας αντικαταστήσουμε την ετικέτα a με το στοιχείο NavLink:

<NavLink to="/sellers" end>
	Sellers
</NavLink>

Και το τελευταίο. Για να επισημαίνεται στο menu μας ο ενεργός σύνδεσμος, και να είναι κατανοητό σε ποια σελίδα βρισκόμαστε, θα προσθέσουμε στυλ στο index.css:

nav a.active {
	color: purple;
}

Ας εκκινήσουμε την εφαρμογή μας. Τώρα μπορούμε να πάμε στη σελίδα με τους πωλητές, κάνοντας κλικ στο 'Sellers' στο menu. Πριν, φυσικά, πρέπει να κάνετε κλικ στο 'Products' στο menu, διαφορετικά τα προϊόντα μας δεν θα φορτωθούν. Στο επόμενο μάθημα θα φτιάξουμε μια σελίδα για κάθε πωλητή και με αυτό θα ολοκληρώσουμε τη μελέτη αυτού του εκπαιδευτικού εγχειριδίου για το Redux.

Ανοίξτε την εφαρμογή σας με τους μαθητές. Μελετώντας το υλικό του μαθήματος, στον φάκελο teachers δημιουργήστε το αρχείο TeachersList.jsx. Με τη βοήθεια αυτού του component θα εμφανίζετε τη λίστα των διδασκόντων. Εισαγάγετε σε αυτό τα απαραίτητα components και hooks.

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

Στο τέλος του αρχείου teachersSlice.js δημιουργήστε ένα ζευγάρι συναρτήσεων-selectors selectAllTeachers και selectTeacherById, όπως φαίνεται στο μάθημα.

Στο App.jsx συνδέστε ακόμη μια θυγατρική διαδρομή για τη σελίδα με τους διδάσκοντες.

Στο αρχείο root.jsx στο menu για το 'Teachers' αντικαταστήστε την ετικέτα a με το NavLink, όπως φαίνεται στο μάθημα. Κάντε έτσι ώστε ο ενεργός σύνδεσμος στο menu να ξεχωρίζει, προσθέτοντας για αυτό στυλ στο index.css.