Pobieranie danych ze store w komponencie w Redux

Na tym zajęciu wyświetlimy dane z store w komponencie React.

Otwórzmy naszą aplikację z produktami, wejdźmy do folderu parts/products i utwórzmy w nim plik ProductsList.jsx. Na początek zaimportujmy do niego hook useSelector, za pomocą którego będziemy pobierać dane ze store:

parts/products/ProductsList.jsximport { useSelector } from 'react-redux'

Teraz pobierzmy produkty ze store. Funkcji-selektora nie będziemy tworzyć osobno, wpiszmy jej kod od razu w parametrze dla useSelector:

parts/products/ProductsList.jsxexport const ProductsList = () => {
  const products = useSelector((state) => state.products)
}

Następnie wyświetlimy produkty standardowym sposobem w ciele funkcji ProductsList po linijce z pobieraniem produktów, używając 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>
))

A poniżej wyświetlimy dispProducts w następującym kodzie HTML:

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

Teraz pozostało wyświetlić naszą listę produktów na głównej stronie. Otwórzmy plik root.jsx i poprawmy nagłówek:

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

Na następujący:

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

Następnie zaimportujmy do pliku komponent ProductsList:

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

I wstawmy go w div z id main-page zaraz po zamykającym tagu hr:

app/root.jsx<ProductsList />

Uruchamiamy naszą aplikację. Nasza lista z dwoma produktami została pomyślnie wyświetlona na głównej stronie.