⊗jsrxPmWFRSD 14 of 57 menu

Získavanie údajov z store v komponente v Reduxe

V tejto lekcii zobrazíme údaje z store v React komponente.

Otvorme našu aplikáciu s produktami, prejdime do priečinka parts/products a vytvorme v ňom súbor ProductsList.jsx. Na začiatok importujme do neho hook useSelector, pomocou ktorého budeme získavať údaje z store:

import { useSelector } from 'react-redux'

Teraz získajme produkty z store. Funkciu-selektor nevytvoríme samostatne, jej kód napíšeme priamo do parametra pre useSelector:

export const ProductsList = () => { const products = useSelector((state) => state.products) }

Potom zobrazíme produkty štandardným spôsobom v tele funkcie ProductsList po riadku so získaním produktov, pomocou 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> ))

A nižšie zobrazíme dispProducts v nasledujúcom HTML:

return ( <div> <h2>Products</h2> {dispProducts} </div> )

Teraz už zostáva len zobraziť náš zoznam produktov na hlavnej stránke. Otvorme súbor root.jsx a opravme nadpis:

<h2>This is my first Redux app!</h2>

Na nasledujúci:

<h2>My Products App</h2>

Potom importujme do súboru komponent ProductsList:

import { ProductsList } from '../parts/products/ProductsList'

A vložme ho do div s id main-page hneď po zatváracom tagu hr:

<ProductsList />

Spustíme našu aplikáciu. Náš zoznam z dvoch produktov sa úspešne zobrazil na hlavnej stránke.

Otvorte vašu aplikáciu so študentmi. Vytvorte súbor StudentsList.jsx v priečinku students.

Získajte študentov z store pomocou hooku useSelector, ako je popísané v lekcii. Zobrazte všetky polia s informáciami o študentoch z stavu, pomocou map.

Importujte získaný komponent StudentsList do root.jsx a zobrazte ho na hlavnej stránke. Uistite sa, že všetky informácie o študentoch sa zobrazili na obrazovke.

Slovenčina
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Používame cookies na fungovanie stránky, analýzu a personalizáciu. Spracúvanie údajov prebieha v súlade s Politikou ochrany osobných údajov.
prijať všetky nastaviť odmietnuť