⊗jsrxPmWFRSD 14 of 57 menu

Hent data fra store i en komponent i Redux

I denne lektion vil vi vise data fra store i en React komponent.

Lad os åbne vores produktapplikation, gå ind i mappen parts/products og oprette en fil i den kaldet ProductsList.jsx. Til at starte med vil vi importere hook'et useSelector, som vi vil bruge til at hente data fra store:

import { useSelector } from 'react-redux'

Lad os nu hente produkterne fra store. Vi vil ikke oprette selector-funktionen separat, vi skriver dens kode direkte i parameteren til useSelector:

export const ProductsList = () => { const products = useSelector((state) => state.products) }

Herefter vil vi vise produkterne på standard vis i kroppen af funktionen ProductsList efter linjen med hentning af produkter, ved at bruge 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> ))

Og nedenfor viser vi dispProducts i følgende opmærkning:

return ( <div> <h2>Products</h2> {dispProducts} </div> )

Nu mangler vi bare at vise vores liste med produkter på hovedsiden. Lad os åbne filen root.jsx og rette overskriften:

<h2>This is my first Redux app!</h2>

Til følgende:

<h2>My Products App</h2>

Herefter importerer vi i filen komponenten ProductsList:

import { ProductsList } from '../parts/products/ProductsList'

Og indsætter den i div'en med id main-page lige efter den lukkende hr-tag:

<ProductsList />

Lad os starte vores applikation. Vores liste med to produkter blev vist succesfuldt på hovedsiden.

Åbn din applikation med studerende. Opret filen StudentsList.jsx i mappen students.

Hent de studerende fra store ved hjælp af hook'et useSelector, som beskrevet i lektionen. Vis alle felter med information om de studerende fra staten, ved at bruge map.

Importer den oprettede komponent StudentsList i root.jsx og vis den på hovedsiden. Sørg for, at al information om de studerende bliver vist på skærmen.

Dansk
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Vi bruger cookies til webstedets funktion, analyse og personalisering. Behandling af data foregår i henhold til Fortrolighedspolitikken.
accepter alle tilpas afvis