⊗jsrxPmWFRSD 14 of 57 menu

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.

Suomi
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Käytämme evästeitä verkkosivuston toiminnalle, analytiikalle ja personoinnille. Tietojen käsittely tapahtuu Tietosuojakäytännön mukaisesti.
hyväksy kaikki mukauta hylkää