Abrufen von Daten aus dem Store in einer Komponente in Redux
In dieser Lektion werden wir Daten aus dem Store in einer React-Komponente anzeigen.
Öffnen wir unsere Produktanwendung, gehen wir
in den Ordner parts/products und erstellen darin
die Datei ProductsList.jsx. Zuerst importieren wir
den Hook useSelector, mit dem wir
Daten aus dem Store abrufen werden:
import { useSelector } from 'react-redux'
Lassen Sie uns nun die Produkte aus dem Store abrufen.
Die Selektor-Funktion werden wir nicht separat erstellen,
sondern ihren Code direkt im Parameter für
useSelector schreiben:
export const ProductsList = () => {
const products = useSelector((state) => state.products)
}
Anschließend werden wir die Produkte auf standardmäßige Weise
im Körper der Funktion ProductsList nach
der Zeile mit dem Abruf der Produkte anzeigen, indem wir
map verwenden:
const dispProducts = products.map((product) => (
<div key={product.id}>
<h3>{product.name}</h3>
<p>{product.desc.substring(0, 100)}</p>
<p>Price: {product.price}</p>
<p>Amount: {product.amount}</p>
</div>
))
Und unten geben wir dispProducts in der folgenden
Struktur aus:
return (
<div>
<h2>Products</h2>
{dispProducts}
</div>
)
Jetzt müssen wir nur noch unsere Produktliste
auf der Hauptseite anzeigen. Öffnen wir die
Datei root.jsx und ändern die Überschrift:
<h2>This is my first Redux app!</h2>
In:
<h2>My Products App</h2>
Dann importieren wir in die Datei die Komponente
ProductsList:
import { ProductsList } from '../parts/products/ProductsList'
Und fügen sie in das Div mit der ID main-page
gleich nach dem schließenden Tag hr ein:
<ProductsList />
Starten wir unsere Anwendung. Unsere Liste mit zwei Produkten wurde erfolgreich auf der Hauptseite angezeigt.
Öffnen Sie Ihre Studenten-Anwendung.
Erstellen Sie die Datei StudentsList.jsx im Ordner
students.
Rufen Sie die Studenten aus dem Store mit Hilfe
des Hooks useSelector ab, wie in der Lektion beschrieben.
Zeigen Sie alle Felder mit Informationen über die
Studenten aus dem State an, indem Sie
map verwenden.
Importieren Sie die erhaltene Komponente
StudentsList in root.jsx und
geben Sie sie auf der Hauptseite aus. Vergewissern Sie sich,
dass alle Informationen über die Studenten
auf dem Bildschirm angezeigt werden.