⊗jsrxPmWFRSD 14 of 57 menu

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.

Deutsch
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Wir verwenden Cookies für den Betrieb der Website, Analyse und Personalisierung. Die Datenverarbeitung erfolgt gemäß der Datenschutzerklärung.
alle akzeptieren anpassen ablehnen