Verkäufer-Seite in Redux

Es ist nur noch wenig zu tun. Lasst uns in dieser Lektion die letzte Sache erledigen - wir fügen unserer Anwendung eine separate Seite für jeden Verkäufer hinzu. Hier werden nur bereits Ihnen bekannte Aktionen durchgeführt. Fangen wir an.

Wir öffnen unsere Anwendung mit den Produkten und darin den Ordner sellers. Wir erstellen in diesem Ordner die Datei SellerPage.jsx. Jetzt beginnen wir mit dem Code für unsere Komponente SellerPage:

export const SellerPage = () => {}

Zuerst holen wir uns die id des Verkäufers und finden damit das Objekt des benötigten Verkäufers im Slice:

export const SellerPage = () => {
	let params = useParams()
	const { sellerId } = params

	const seller = useSelector((state) => selectSellerById(state, sellerId))
}

Weiter unten im Code für SellerPage nach dem Erhalten des Verkäufers holen wir uns alle Produkte und dann wählen wir davon nur diejenigen aus, die von diesem Verkäufer eingestellt wurden:

const productsOfSeller = useSelector((state) => {
	const allProducts = selectAllProducts(state)
	return allProducts.filter((product) => product.seller === sellerId)
})

Und dann bilden wir aus den Namen der ausgewählten Produkte eine Liste mit Hilfe von map. Dabei wird jeder Produktname in dieser Liste ein Link zur Seite dieses Produkts sein:

const productNames = productsOfSeller.map((product) => (
	<li key={product.id}>
		<Link to={`/products/${product.id}`}>{product.name}</Link>
	</li>
))

Und am Ende des Codes für SellerPage geben wir das Markup zurück: eine Überschrift mit dem Namen des Verkäufers und eine Liste der Produkte, die dieser Verkäufer eingestellt hat:

return (
	<div>
	<h2>Verkäufer: {seller.name}</h2>

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

Natürlich benötigen wir auch eine Route für die Verkäufer-Seite. Wir öffnen die Datei App.jsx und fügen sie als letzte zu den Kind-Routen hinzu:

{
	path: '/sellers/:sellerId',
	element: <SellerPage />,
},

Vergessen Sie nicht, die notwendigen Hooks und Komponenten in SellersPage.jsx und App.jsx zu importieren.

Wir starten unsere Anwendung, laden die Produkte, und klicken dann im Menü links auf den Link 'Sellers'. Jetzt können wir auf die Seite eines beliebigen Verkäufers gehen, indem wir auf seinen Namen klicken, und dann auf seiner Seite alle seine Produkte sehen. Und indem wir auf eines seiner Produkte klicken, gelangen wir auf die Seite dieses Produkts.

Das ist alles fürs Erste. Wir haben die Grundlagen von Redux für die Erstellung einer Anwendung kennengelernt und sogar ein wenig tiefer. Wir haben verschiedene nützliche Werkzeuge kennengelernt. Ich wünsche Ihnen viel Glück bei der Erstellung Ihrer Redux-Anwendungen!

Öffnen Sie Ihre Anwendung mit den Studenten. Nachdem Sie die Materialien der Lektion studiert haben, erstellen Sie in dem Ordner teachers die Datei TeacherPage.jsx. Holen Sie sich im Code der Komponente TeacherPage das Objekt mit dem benötigten Lehrer und alle Studenten dieses Dozenten. Erstellen Sie mit Hilfe von map eine Liste aus ihnen, der vollständige Name jedes Studenten soll ein Link zur Seite dieses Studenten sein.

Lassen Sie es im zurückgegebenen Markup eine Überschrift mit dem vollständigen Namen des Dozenten geben, darunter eine kleinere Überschrift - mit dem Fach, das er unterrichtet, und noch darunter die Liste seiner Studenten.

Schalten Sie in App.jsx noch eine weitere Kind- Route für die Seite mit dem Dozenten hinzu.

Starten Sie Ihre Anwendung und vergewissern Sie sich, dass alles funktioniert.