Wiederverwendung von Daten aus einem Slice in Redux

In der letzten Lektion haben wir zum Formular zum Hinzufügen eines Produkts ein weiteres Feld mit einer Dropdown-Liste zur Auswahl des Verkäufers hinzugefügt, der es einstellt. Nehmen wir an, jetzt müssen wir diese Informationen auch an mehreren anderen Stellen der Anwendung anzeigen. Dafür werden wir den Code nicht jedes Mal duplizieren, sondern einfach eine separate Komponente erstellen, in der wir die Daten aus dem Slice abrufen und in den Teilen der Anwendung anzeigen, wo wir sie benötigen.

Öffnen wir unsere Produktanwendung. Lassen Sie uns jetzt im Ordner products noch eine Datei SellerOfProd.jsx erstellen. Zunächst importieren wir den Hook useSelector, mit dessen Hilfe wir den Slice mit dem benötigten Produkt erhalten:

import { useSelector } from 'react-redux'

Dann extrahieren wir aus dem store das benötigte Produkt anhand der Verkäufer-ID, die wir unserer neuen Komponente in den Props übergeben:

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

Und falls ein solcher Verkäufer existiert, geben wir seinen Namen zurück, andernfalls geben wir 'unknown' zurück:

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

Lassen Sie uns jetzt unsere neue Komponente in ProductsList.jsx importieren und in der Funktion ProductsList direkt nach der Überschrift mit dem Produktnamen einfügen. Wie Sie sehen, haben wir ihm in den Props die ID übergeben:

<SellerOfProd sellerId={product.seller} />

Wenn wir jetzt unsere Anwendung starten, ein neues Produkt hinzufügen und es in der Liste finden, werden wir sehen, dass es einen Verkäufer hat, während die bei Anwendungsstart automatisch hinzugefügten Produkte 'unknown' anzeigen.

Ein kleiner Exkurs: Wenn Ihr eslint im Editor VS Code sich über sellerId beschwert, die Anwendung aber funktioniert, können Sie das vorerst ignorieren oder die Datei .eslintrc.cjs Ihrer Anwendung öffnen und in rules "react/prop-types": "off" hinzufügen.

Es versteht sich von selbst, dass wir die Verkäuferinformationen auch auf der Produktseite anzeigen möchten. Dazu fügen wir in dem Markup von ProductPage nach der Überschrift mit dem Produktnamen erneut diese Zeile ein und prüfen, ob alles funktioniert:

<SellerOfProd sellerId={product.seller} />

Öffnen Sie Ihre Studentenanwendung. Nachdem Sie den Stoff der Lektion durchgearbeitet haben, erstellen Sie im Ordner students eine Datei für die Komponente TeacherForStudent. Als Ergebnis sollte die Komponente den vollständigen Namen des Lehrers zurückgeben, und daneben in Klammern das Fach, das er unterrichtet. Den benötigten Lehrer finden Sie mit Hilfe des Hooks useSelector. Wenn kein Lehrer für diesen Studenten vorhanden ist, geben Sie 'anonym' aus.

Geben Sie mit der erhaltenen Komponente aus der vorherigen Aufgabe die Daten des Lehrers für jeden Studenten auf der Seite mit der Studentenliste aus.

Machen Sie dasselbe wie in der vorherigen Aufgabe, aber für die separate Seite eines Studenten.