⊗jsrxPmWFRSD 14 of 57 menu

Pridobivanje podatkov iz store v komponenti v Redux

V tej lekciji bomo prikazali podatke iz store v React komponenti.

Odprimo našo aplikacijo s produkti, pojdimo v mapo parts/products in ustvarimo v njej datoteko ProductsList.jsx. Za začetek uvozimo vanjo kavelj useSelector, s pomočjo katerega bomo pridobivali podatke iz store:

import { useSelector } from 'react-redux'

Zdaj pa pridobimo produkte iz store. Funkcije-selektorja ne bomo ustvarili posebej, njeno kodo bomo napisali kar v parametru za useSelector:

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

Nato bomo produkte prikazali na standardni način v telesu funkcije ProductsList po vrstici s pridobivanjem produktov, z uporabo 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> ))

In spodaj prikažimo dispProducts v naslednji postavitvi:

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

Zdaj je treba še prikazati naš seznam produktov na glavni strani. Odprimo datoteko root.jsx in popravimo naslov:

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

Na naslednji:

<h2>My Products App</h2>

Nato uvozimo v datoteko komponento ProductsList:

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

In vstavimo jo v div z id main-page takoj za zapiralnim označevalcem hr:

<ProductsList />

Zaženemo našo aplikacijo. Naš seznam iz dveh produktov se je uspešno prikazal na glavni strani.

Odprite vašo aplikacijo s študenti. Ustvarite datoteko StudentsList.jsx v mapi students.

Pridobite študente iz store s pomočjo kavlja useSelector, kot je opisano v lekciji. Prikažite vsa polja z informacijami o študentih iz stanja, z uporabo map.

Uvozite pridobljeno komponento StudentsList v root.jsx in jo prikažite na glavni strani. Prepričajte se, da so se vse informacije o študentih prikazale na zaslonu.

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
Za delovanje spletnega mesta, analitiko in personalizacijo uporabljamo piškotke. Obdelava podatkov poteka v skladu s Politiko zasebnosti.
sprejmi vse nastavi zavrni