⊗jsrxPmWFRSD 14 of 57 menu

Datu iegūšana no store komponentē Redux

Šajā nodarbībā mēs attēlosim datus no store React komponentē.

Atvērsim mūsu lietotni ar produktiem, iesim mapē parts/products un izveidosim tajā failu ProductsList.jsx. Sākumā importēsim tajā hook useSelector, ar kura palīdzību iegūsim datus no store:

import { useSelector } from 'react-redux'

Tagad iegūsim produktus no store. Funkciju-selector mēs neveidosim atsevišķi, ierakstīsim tās kodu tieši parametrā priekš useSelector:

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

Pēc tam mēs attēlosim produktus standarta veidā funkcijas ProductsList ķermenī pēc rindiņas ar produktu iegūšanu, izmantojot 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> ))

Un zemāk attēlosim dispProducts sekojošā izmantotnē:

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

Tagad atliek attēlot mūsu produktu sarakstu galvenajā lapā. Atvērsim failu root.jsx un labosim virsrakstu:

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

Uz sekojošo:

<h2>My Products App</h2>

Pēc tam importēsim failā komponentu ProductsList:

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

Un ievietosim to div ar id main-page tūlīt pēc aizverošā taga hr:

<ProductsList />

Palaizam mūsu lietotni. Mūsu saraksts no diviem produktiem veiksmīgi tika attēlots galvenajā lapā.

Atveriet savu lietotni ar studentiem. Izveidojiet failu StudentsList.jsx mapē students.

Iegūstiet studentus no store ar hook useSelector palīdzību, kā aprakstīts nodarbībā. Attēlojiet visus laukus ar informāciju par studentiem no state, izmantojot map.

Importējiet iegūto komponentu StudentsList root.jsx un attēlojiet to galvenajā lapā. Pārliecinieties, ka visa informācija par studentiem tika attēlota ekrānā.

Latviešu
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Mēs izmantojam sīkdatnes, lai nodrošinātu vietnes darbību, analīti un personalizāciju. Datu apstrāde notiek saskaņā ar Konfidencialitātes politiku.
pieņemt visus iestatīt noraidīt