Obținerea datelor din store în componentă în Redux
În această lecție vom afișa datele din store într-o componentă React.
Deschidem aplicația noastră cu produse, intrăm
în folderul parts/products și creăm în el
fișierul ProductsList.jsx. Pentru început importăm
în el hook-ul useSelector, cu ajutorul căruia
vom obține date din store:
import { useSelector } from 'react-redux'
Acum să obținem produsele din store.
Funcția-selector nu o vom crea separat,
îi vom scrie codul direct în parametrul pentru
useSelector:
export const ProductsList = () => {
const products = useSelector((state) => state.products)
}
Apoi vom afișa produsele în mod standard
în corpul funcției ProductsList după
linia cu obținerea produselor, folosind
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>
))
Și mai jos vom afișa dispProducts în următorul
markup:
return (
<div>
<h2>Products</h2>
{dispProducts}
</div>
)
Acum rămâne să afișăm lista noastră
de produse pe pagina principală. Deschidem
fișierul root.jsx și corectăm titlul:
<h2>This is my first Redux app!</h2>
În următorul:
<h2>My Products App</h2>
Apoi importăm în fișier componenta
ProductsList:
import { ProductsList } from '../parts/products/ProductsList'
Și o inserăm în div-ul cu id-ul main-page
imediat după tag-ul de închidere hr:
<ProductsList />
Pornim aplicația noastră. Lista noastră din două produse a fost afișată cu succes pe pagina principală.
Deschideți aplicația voastră cu studenți.
Creați fișierul StudentsList.jsx în folderul
students.
Obțineți studenții din store cu ajutorul
hook-ului useSelector, așa cum este descris în lecție.
Afișați toate câmpurile cu informații despre
studenți din state, folosind
map.
Importați componenta obținută
StudentsList în root.jsx și
afișați-o pe pagina principală. Asigurați-vă
că toate informațiile despre studenți
sunt afișate pe ecran.