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.