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:

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

Haetaan nyt tuotteet storesta. Selector-funktiota emme luo erikseen, kirjoitamme sen koodin suoraan parametriin useSelector:lle:

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

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

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

Nyt jäljellä on tuoteluettelomme näyttäminen pääsivulla. Avataan tiedosto root.jsx ja muutetaan otsikko:

app/root.jsx<h2>Tämä on ensimmäinen Redux-sovellukseni!</h2>

Seuraavaksi:

app/root.jsx<h2>Minun Tuotesovellukseni</h2>

Sitten importataan tiedostoon komponentti ProductsList:

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

Ja lisätään se diviin, jolla on id main-page heti hr-tagin jälkeen:

app/root.jsx<ProductsList />

Käynnistetään sovelluksemme. Luettelomme kahdesta tuotteesta näkyi onnistuneesti pääsivulla.