Verkäuferliste in Redux

In den vorherigen Lektionen haben wir den grundlegenden Stoff abgeschlossen. Jetzt erhalten wir mit Hilfe von Thunk eine Liste von Produkten vom Server und können ein neues Produkt auf dem Server speichern. Lassen Sie uns die Verkäufer behandeln. Schließlich erhalten wir auch Daten für sie. Lassen Sie uns eine separate Seite mit einer Liste der Verkäufer erstellen.

Öffnen wir unsere Produktanwendung und darin den Ordner sellers. Wir erstellen in diesem Ordner die Datei SellersList.jsx. Hier werden wir useSelector, Link und selectAllSellers verwenden, dessen Code wir später in sellersSlice.js schreiben werden:

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

Als nächstes erstellen wir die SellersList selbst. Darin erhalten wir alle Verkäufer mit dem Hook useSelector, dann holen wir das Markup für die Liste der Verkäufer in einer map-Schleife, wobei jeder Verkäufername zu seiner eigenen Seite führen wird. Und am Ende geben wir das Markup mit der Überschrift und der erstellten Liste zurück:

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>Verkäufer:</h2>

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

Dann gehen wir in die Datei sellersSlice.js und erstellen, analog zu den Selektoren in productsSlice.js, am Ende der Datei zwei Selektoren nach dem Export des Reduzierers:

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

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

Jetzt müssen wir die Route für die Seite mit der Liste festlegen. Dazu öffnen wir die Datei App.jsx und fügen dem Array der untergeordneten Routen children ein weiteres Objekt hinzu (vergessen Sie nicht, die Komponente SellersList zu importieren):

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

Damit unser Link 'Sellers' im Menü funktioniert, gehen wir in die Datei root.jsx (wie lange ist das her ... ) und ersetzen das Tag a durch das Element NavLink:

<NavLink to="/sellers" end>
	Verkäufer
</NavLink>

Und zum Schluss. Damit in unserem Menü der aktive Link hervorgehoben wird und klar ist, auf welcher Seite wir uns befinden, fügen wir einen Stil in index.css hinzu:

nav a.active {
	color: purple;
}

Starten wir unsere Anwendung. Jetzt können wir auf die Seite mit den Verkäufern gelangen, indem wir auf 'Verkäufer' im Menü klicken. Zuvor muss natürlich auf 'Produkte' im Menü geklickt werden, sonst werden unsere Produkte nicht geladen. In der nächsten Lektion erstellen wir eine Seite für jeden Verkäufer und schließen damit das Studium dieses Redux-Lehrgangs ab.

Öffnen Sie Ihre Anwendung mit den Studenten. Nachdem Sie die Unterrichtsmaterialien studiert haben, erstellen Sie in dem Ordner teachers die Datei TeachersList.jsx. Mit Hilfe dieser Komponente werden Sie eine Liste der Lehrer ausgeben. Importieren Sie darin die notwendigen Komponenten und Hooks.

Schreiben Sie den Code für die Komponente TeachersList. Holen Sie sich darin alle Lehrer und erstellen Sie eine Liste der Lehrer teachersToRender. Lassen Sie in jeder Zeile dieser Liste deren Nachnamen und Initialen anzeigen, und in Klammern das Fach, das sie unterrichten. Lassen Sie jeder vollständige Name einen Link sein, der zu einer separaten Seite für jeden Lehrer führt. Geben Sie dann am Ende des Komponentencodes das Markup mit der Überschrift und der erstellten Liste zurück.

Erstellen Sie am Ende der Datei teachersSlice.js ein Paar Selektorfunktionen selectAllTeachers und selectTeacherById, wie in der Lektion gezeigt.

Fügen Sie in App.jsx eine weitere untergeordnete Route für die Seite mit den Lehrern hinzu.

Ersetzen Sie in der Datei root.jsx im Menü für 'Lehrer' das Tag a durch NavLink, wie in der Lektion gezeigt. Sorgen Sie dafür, dass der aktive Link im Menü hervorgehoben wird, indem Sie dafür Stile in index.css hinzufügen.