⊗jsrxPmWFRSD 14 of 57 menu

Տվյալներն store-ից կոմպոնենտում ստանալը Redux-ում

Այս դասին մենք կարտահանենք տվյալները store-ից React կոմպոնենտում։

Բացենք մեր ապրանքների հավելվածը, մտնենք parts/products պանակի մեջ և ստեղծենք դրա մեջ ProductsList.jsx ֆայլը։ Սկզբից ներմուծենք դրա մեջ useSelector հուկը, որի օգնությամբ կստանանք տվյալներ store-ից։

import { useSelector } from 'react-redux'

Հիմա եկեք ստանանք ապրանքները store-ից։ Ֆունկցիա-սելեկտորը առանձին չենք ստեղծի, կգրենք դրա կոդը անմիջապես useSelector-ի պարամետրի մեջ։

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

Ապա մենք կարտահանենք ապրանքները ստանդարտ եղանակով ProductsList ֆունկցիայի մարմնում ապրանքներ ստանալու տողից հետո, օգտագործելով map մեթոդը։

const dispProducts = products.map((product) => ( <div key={product.id}> <h3>{product.name}</h3> <p>{product.desc.substring(0, 100)}</p> <p>Գին՝ {product.price}</p> <p>Քանակ՝ {product.amount}</p> </div> ))

Իսկ ներքևում կարտահանենք dispProducts-ը հետևյալ վերստում։

return ( <div> <h2>Ապրանքներ</h2> {dispProducts} </div> )

Հիմա մնաց է ցուցադրել մեր ապրանքների ցուցակը գլխավոր էջում։ Բացենք root.jsx ֆայլը և ուղղենք վերնագիրը։

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

Հետևյալի։

<h2>Իմ Ապրանքների Հավելվածը</h2>

Ապա ներմուծենք ֆայլի մեջ ProductsList կոմպոնենտը։

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

Եվ կտեղադրենք այն main-page աիդի ունեցող դիվի մեջ անմիջապես hr փակվող թեգից հետո։

<ProductsList />

Գործարկենք մեր հավելվածը։ Մեր երկու ապրանքների ցուցակը հաջողությամբ արտահանվեց գլխավոր էջում։

Բացեք ձեր ուսանողների հավելվածը։ Ստեղծեք StudentsList.jsx ֆայլը students պանակում։

Ստացեք ուսանողներին store-ից օգտագործելով useSelector հուկը, ինչպես նկարագրված է դասում։ Ցուցադրեք ուսանողների մասին ստեյթում եղած բոլոր դաշտերը՝ օգտագործելով map մեթոդը։

Ներմուծեք ստացված StudentsList կոմպոնենտը root.jsx ֆայլի մեջ և արտահանեք այն գլխավոր էջում։ Համոզվեք, որ ուսանողների մասին բոլոր տեղեկությունները ցուցադրվել են էկրանին։

Հայերեն
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Մենք օգտագործում ենք cookie-ներ կայքի աշխատանքի, վերլուծության և անհատականացման համար։ Տվյալների մշակումը կատարվում է համաձայն Գաղտնիության քաղաքականության։
ընդունել բոլորը կարգավորել մերժել