⊗jsrxPmWFRSD 14 of 57 menu

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.

Polski
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Wykorzystujemy pliki cookie do działania strony, analizy i personalizacji. Przetwarzanie danych odbywa się zgodnie z Polityką prywatności.
zaakceptuj wszystkie dostosuj odrzuć