Datu iegūšana no store komponentē Redux
Šajā nodarbībā mēs attēlosim datus no store React komponentē.
Atvērsim mūsu lietotni ar produktiem, iesim
mapē parts/products un izveidosim tajā
failu ProductsList.jsx. Sākumā importēsim
tajā hook useSelector, ar kura palīdzību
iegūsim datus no store:
import { useSelector } from 'react-redux'
Tagad iegūsim produktus no store.
Funkciju-selector mēs neveidosim atsevišķi,
ierakstīsim tās kodu tieši parametrā priekš
useSelector:
export const ProductsList = () => {
const products = useSelector((state) => state.products)
}
Pēc tam mēs attēlosim produktus standarta veidā
funkcijas ProductsList ķermenī pēc
rindiņas ar produktu iegūšanu, izmantojot
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>
))
Un zemāk attēlosim dispProducts sekojošā
izmantotnē:
return (
<div>
<h2>Products</h2>
{dispProducts}
</div>
)
Tagad atliek attēlot mūsu produktu sarakstu
galvenajā lapā. Atvērsim
failu root.jsx un labosim virsrakstu:
<h2>This is my first Redux app!</h2>
Uz sekojošo:
<h2>My Products App</h2>
Pēc tam importēsim failā komponentu
ProductsList:
import { ProductsList } from '../parts/products/ProductsList'
Un ievietosim to div ar id main-page
tūlīt pēc aizverošā taga hr:
<ProductsList />
Palaizam mūsu lietotni. Mūsu saraksts no diviem produktiem veiksmīgi tika attēlots galvenajā lapā.
Atveriet savu lietotni ar studentiem.
Izveidojiet failu StudentsList.jsx mapē
students.
Iegūstiet studentus no store ar
hook useSelector palīdzību, kā aprakstīts nodarbībā.
Attēlojiet visus laukus ar informāciju par
studentiem no state, izmantojot
map.
Importējiet iegūto komponentu
StudentsList root.jsx un
attēlojiet to galvenajā lapā. Pārliecinieties,
ka visa informācija par studentiem
tika attēlota ekrānā.