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:

parts/products/ProductsList.jsximport { 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:

parts/products/ProductsList.jsxexport 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:

parts/products/ProductsList.jsxconst 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:

parts/products/ProductsList.jsxreturn (
  <div>
    <h2>Products</h2>
    {dispProducts}
  </div>
)

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

app/root.jsx<h2>This is my first Redux app!</h2>

Na naslednji:

app/root.jsx<h2>My Products App</h2>

Nato uvozimo v datoteko komponento ProductsList:

app/root.jsximport { ProductsList } from '../parts/products/ProductsList'

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

app/root.jsx<ProductsList />

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