⊗jsrxPmWFRSD 14 of 57 menu

Získávání dat ze store v komponentě v Reduxu

V této lekci zobrazíme data z store v React komponentě.

Otevřeme naši aplikaci s produkty, přejdeme do složky parts/products a vytvoříme v ní soubor ProductsList.jsx. Pro začátek importujeme do něj hook useSelector, pomocí kterého budeme získávat data z store:

import { useSelector } from 'react-redux'

Nyní získáme produkty z store. Funkci-selektor nebudeme vytvářet zvlášť, její kód napíšeme přímo do parametru pro useSelector:

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

Poté produkty zobrazíme standardním způsobem v těle funkce ProductsList po řádku s získáním produktů, pomocí 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 níže zobrazíme dispProducts v následujícím kódu:

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

Nyní zbývá zobrazit náš seznam produktů na hlavní stránce. Otevřeme soubor root.jsx a opravíme nadpis:

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

Na následující:

<h2>My Products App</h2>

Poté importujeme do souboru komponentu ProductsList:

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

A vložíme ji do divu s id main-page hned po uzavíracím tagu hr:

<ProductsList />

Spustíme naši aplikaci. Náš seznam dvou produktů byl úspěšně zobrazen na hlavní stránce.

Otevřete vaši aplikaci se studenty. Vytvořte soubor StudentsList.jsx ve složce students.

Získejte studenty z store pomocí hoku useSelector, jak je popsáno v lekci. Zobrazte všechna pole s informacemi o studentech ze stavu, pomocí map.

Importujte získanou komponentu StudentsList do root.jsx a zobrazte ji na hlavní stránce. Ujistěte se, že všechny informace o studentech se zobrazily na obrazovce.

Čeština
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Používáme soubory cookie pro fungování webu, analýzu a personalizaci. Zpracování údajů probíhá v souladu s Zásadami ochrany osobních údajů.
přijmout vše přizpůsobit odmítnout