⊗jsrxPmWFRSD 14 of 57 menu

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.

Română
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Folosim cookie pentru funcționarea site-ului, analiză și personalizare. Prelucrarea datelor are loc în conformitate cu Politica de confidențialitate.
acceptă toate configurează respinge