⊗jsrxPmWFRSD 14 of 57 menu

Redux-те store-дан компоненттен дерек алу

Осы сабақта біз store-дан деректерді React компонентіне шығарамыз.

Өнімдеріміз бар қолданбаны ашып, parts/products бумасына кіріп, онда ProductsList.jsx файлын құрайық. Алдымен оған store-дан дерек алу үшін қажет болатын useSelector хукін импорттаймыз:

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>Бұл менің тұңғыш Redux қолданбам!</h2>

Мынауға:

<h2>Менің Өнімдер Қолданбам</h2>

Содан кейін файлға ProductsList компонентін импорттаймыз:

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

Және оны main-page айдисі бар дивке, hr жабатын тегінен кейін бірден енгіземіз:

<ProductsList />

Қолданбамызды іске қосамыз. Біздің екі өнімнен тұратын тізіміміз басты бетте сәтті шықты.

Студенттеріңіз бар қолданбаны ашыңыз. students бумасында StudentsList.jsx файлын құрыңыз.

Сабақта сипатталғандай, useSelector хукінің көмегімен store-дан студенттерді алыңыз. map қолданып, стейттен алынған студенттер туралы барлық ақпарат өрістерін көрсетіңіз.

Алынған StudentsList компонентін root.jsx-ке импорттап, оны басты бетте көрсетіңіз. Студенттер туралы барлық ақпарат экранда көрсетілгеніне көз жеткізіңіз.

Қазақ
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικά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
Біз сайттың жұмысы, аналитика және персонализация үшін cookie файлдарын қолданамыз. Деректерді өңдеу Құпиялылық саясаты бойынша жүреді.
барлығын қабылдау баптау қабылдамау