⊗jsrxPmWFRSD 14 of 57 menu

Hämta data från store i en komponent i Redux

På detta lektion kommer vi att visa data från store i en React-komponent.

Öppna vår produktapp, gå till mappen parts/products och skapa filen ProductsList.jsx i den. Låt oss först importera hooken useSelector, som vi kommer att använda för att hämta data från store:

import { useSelector } from 'react-redux'

Låt oss nu hämta produkterna från store. Vi kommer inte att skapa selector-funktionen separat, utan skriver dess kod direkt i parametern för useSelector:

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

Sedan kommer vi att visa produkterna på vanligt sätt i kroppen av funktionen ProductsList efter raden där produkterna hämtas, med hjälp av 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> ))

Och nedanför visar vi dispProducts i följande markup:

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

Nu återstår bara att visa vår produktlista på hemsidan. Öppna filen root.jsx och ändra rubriken:

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

Till följande:

<h2>My Products App</h2>

Importera sedan komponenten ProductsList till filen:

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

Och sätt in den i div:en med id main-page strax efter den stängande taggen hr:

<ProductsList />

Starta vår app. Vår lista med två produkter har visats framgångsrikt på hemsidan.

Öppna din studentapp. Skapa filen StudentsList.jsx i mappen students.

Hämta studenterna från store med hjälp av hooken useSelector, enligt beskrivningen i lektionen. Visa alla fält med information om studenterna från state:t, genom att använda map.

Importera den erhållna komponenten StudentsList till root.jsx och visa den på hemsidan. Se till att all information om studenterna visas på skärmen.

Svenska
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Vi använder kakor för webbplatsens funktion, analys och personalisering. Behandling av data sker i enlighet med Integritetspolicyn.
acceptera alla anpassa avvisa