Hämta data från store i en komponent i Redux
På detta lektion kommer vi att visa data från store i en React-komponent.
Öppna vår produktapp, gå
till mappen parts/products och skapa
filen ProductsList.jsx i den.
Låt oss först importera
hooken useSelector, som vi kommer att använda
för att hämta data från store:
import { useSelector } from 'react-redux'
Låt oss nu hämta produkterna från store.
Vi kommer inte att skapa selector-funktionen separat,
utan skriver dess kod direkt i parametern för
useSelector:
export const ProductsList = () => {
const products = useSelector((state) => state.products)
}
Sedan kommer vi att visa produkterna på vanligt sätt
i kroppen av funktionen ProductsList efter
raden där produkterna hämtas, med hjälp av
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>
))
Och nedanför visar vi dispProducts i följande
markup:
return (
<div>
<h2>Products</h2>
{dispProducts}
</div>
)
Nu återstår bara att visa vår produktlista
på hemsidan. Öppna
filen root.jsx och ändra rubriken:
<h2>This is my first Redux app!</h2>
Till följande:
<h2>My Products App</h2>
Importera sedan komponenten
ProductsList till filen:
import { ProductsList } from '../parts/products/ProductsList'
Och sätt in den i div:en med id main-page
strax efter den stängande taggen hr:
<ProductsList />
Starta vår app. Vår lista med två produkter har visats framgångsrikt på hemsidan.
Öppna din studentapp.
Skapa filen StudentsList.jsx i mappen
students.
Hämta studenterna från store med hjälp av
hooken useSelector, enligt beskrivningen i lektionen.
Visa alla fält med information om
studenterna från state:t, genom att använda
map.
Importera den erhållna komponenten
StudentsList till root.jsx och
visa den på hemsidan. Se till
att all information om studenterna
visas på skärmen.