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:
import { 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:
export 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:
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 poniżej wyświetlimy dispProducts w następującym
kodzie HTML:
return (
<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:
<h2>This is my first Redux app!</h2>
Na następujący:
<h2>My Products App</h2>
Następnie zaimportujmy do pliku komponent
ProductsList:
import { ProductsList } from '../parts/products/ProductsList'
I wstawmy go w div z id main-page
zaraz po zamykającym tagu hr:
<ProductsList />
Uruchamiamy naszą aplikację. Nasza lista z dwoma produktami została pomyślnie wyświetlona na głównej stronie.
Otwórz twoją aplikację ze studentami.
Utwórz plik StudentsList.jsx w folderze
students.
Pobierz studentów ze store za pomocą
hooka useSelector, jak opisano w lekcji.
Wyświetl wszystkie pola z informacjami o
studentach ze stanu, korzystając z
map.
Zaimportuj otrzymany komponent
StudentsList do root.jsx i
wyświetl go na głównej stronie. Upewnij się,
że wszystkie informacje o studentach
wyświetliły się na ekranie.