Hent data fra store i en komponent i Redux
I denne lektion vil vi vise data fra store i en React komponent.
Lad os åbne vores produktapplikation, gå ind
i mappen parts/products og oprette en fil i den
kaldet ProductsList.jsx. Til at starte med vil vi importere
hook'et useSelector, som vi vil bruge til at
hente data fra store:
import { useSelector } from 'react-redux'
Lad os nu hente produkterne fra store.
Vi vil ikke oprette selector-funktionen separat,
vi skriver dens kode direkte i parameteren til
useSelector:
export const ProductsList = () => {
const products = useSelector((state) => state.products)
}
Herefter vil vi vise produkterne på standard vis
i kroppen af funktionen ProductsList efter
linjen med hentning af produkter, ved at bruge
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>
))
Og nedenfor viser vi dispProducts i følgende
opmærkning:
return (
<div>
<h2>Products</h2>
{dispProducts}
</div>
)
Nu mangler vi bare at vise vores liste med
produkter på hovedsiden. Lad os åbne
filen root.jsx og rette overskriften:
<h2>This is my first Redux app!</h2>
Til følgende:
<h2>My Products App</h2>
Herefter importerer vi i filen komponenten
ProductsList:
import { ProductsList } from '../parts/products/ProductsList'
Og indsætter den i div'en med id main-page
lige efter den lukkende hr-tag:
<ProductsList />
Lad os starte vores applikation. Vores liste med to produkter blev vist succesfuldt på hovedsiden.
Åbn din applikation med studerende.
Opret filen StudentsList.jsx i mappen
students.
Hent de studerende fra store ved hjælp af
hook'et useSelector, som beskrevet i lektionen.
Vis alle felter med information om
de studerende fra staten, ved at bruge
map.
Importer den oprettede komponent
StudentsList i root.jsx og
vis den på hovedsiden. Sørg for,
at al information om de studerende
bliver vist på skærmen.