⊗jsrxPmWFRSD 14 of 57 menu

Gegevens ophalen uit de store in een component in Redux

In deze les zullen we gegevens uit de store weergeven in een React-component.

Laten we onze productapplicatie openen, naar de map parts/products gaan en daarin een bestand ProductsList.jsx aanmaken. Laten we eerst de hook useSelector importeren, waarmee we gegevens uit de store zullen halen:

import { useSelector } from 'react-redux'

Laten we nu de producten uit de store halen. We zullen de selectorfunctie niet apart aanmaken, we schrijven de code direct in de parameter voor useSelector:

export const ProductsList = () => { const products = useSelector((state) => state.products) }

Vervolgens zullen we de producten op de standaard manier weergeven in de body van de functie ProductsList na de regel met het ophalen van de producten, gebruikmakend van map:

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> ))

En hieronder geven we dispProducts weer in de volgende opmaak:

return ( <div> <h2>Products</h2> {dispProducts} </div> )

Nu rest ons alleen nog onze productlijst weer te geven op de hoofdpagina. Laten we het bestand root.jsx openen en de titel aanpassen:

<h2>This is my first Redux app!</h2>

Naar het volgende:

<h2>My Products App</h2>

Importeer vervolgens in het bestand de component ProductsList:

import { ProductsList } from '../parts/products/ProductsList'

En plaats deze in de div met id main-page direct na de sluitende tag hr:

<ProductsList />

We starten onze applicatie. Onze lijst met twee producten is succesvol weergegeven op de hoofdpagina.

Open je studentenapplicatie. Maak een bestand StudentsList.jsx aan in de map students.

Haal de studenten op uit de store met behulp van de hook useSelector, zoals beschreven in de les. Geef alle velden met informatie over de studenten uit de state weer, gebruikmakend van map.

Importeer de verkregen component StudentsList in root.jsx en geef deze weer op de hoofdpagina. Zorg ervoor dat alle informatie over de studenten op het scherm wordt weergegeven.

Nederlands
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Wij gebruiken cookies voor de werking van de site, analyse en personalisatie. De verwerking van gegevens gebeurt volgens het Privacybeleid.
alles accepteren aanpassen weigeren