Datan hakeminen storesta komponentissa Reduxissa
Tällä oppitunnilla näytämme datan storessa React-komponentissa.
Avataan tuotesovelluksemme, mennään
kansioon parts/products ja luodaan sinne
tiedosto ProductsList.jsx. Aluksi importataan
siihen hook useSelector, jonka avulla
haemme dataa storesta:
import { useSelector } from 'react-redux'
Haetaan nyt tuotteet storesta.
Selector-funktiota emme luo erikseen,
kirjoitamme sen koodin suoraan parametriin
useSelector:lle:
export const ProductsList = () => {
const products = useSelector((state) => state.products)
}
Sitten näytämme tuotteet tavalliseen tapaan
funktion ProductsList sisällä
tuotteiden haun jälkeen, käyttäen
map:ia:
const dispProducts = products.map((product) => (
<div key={product.id}>
<h3>{product.name}</h3>
<p>{product.desc.substring(0, 100)}</p>
<p>Hinta: {product.price}</p>
<p>Määrä: {product.amount}</p>
</div>
))
Ja alla näytetään dispProducts seuraavassa
HTML:ssä:
return (
<div>
<h2>Tuotteet</h2>
{dispProducts}
</div>
)
Nyt jäljellä on tuoteluettelomme näyttäminen
pääsivulla. Avataan
tiedosto root.jsx ja muutetaan otsikko:
<h2>Tämä on ensimmäinen Redux-sovellukseni!</h2>
Seuraavaksi:
<h2>Minun Tuotesovellukseni</h2>
Sitten importataan tiedostoon komponentti
ProductsList:
import { ProductsList } from '../parts/products/ProductsList'
Ja lisätään se diviin, jolla on id main-page
heti hr-tagin jälkeen:
<ProductsList />
Käynnistetään sovelluksemme. Luettelomme kahdesta tuotteesta näkyi onnistuneesti pääsivulla.
Avaa opiskelijasovelluksesi.
Luo tiedosto StudentsList.jsx kansioon
students.
Hae opiskelijat storesta hookin
useSelector avulla, kuten oppitunnilla kerrottiin.
Näytä kaikki opiskelijoiden tiedot
statesta, käyttäen
map:ia.
Importtaa luotu komponentti
StudentsList tiedostoon root.jsx ja
näytä se pääsivulla. Varmista,
että kaikki opiskelijatiedot
näkyvät ruudulla.