⊗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>Price: {product.price}</p> <p>Amount: {product.amount}</p> </div> ))

А ніжэй выведзем dispProducts у наступнай верстцы:

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

Цяпер засталося адлюстраваць наш спіс прадуктаў на галоўнай старонцы. Адчынём файл root.jsx і выправім загаловак:

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

На наступны:

<h2>My Products App</h2>

Затым імпартуем у файл кампанент ProductsList:

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

І ўставім яго ў дыў з айды main-page адразу пасля зачыняльнага тэга hr:

<ProductsList />

Запускаем наша прыкладанне. Наш спіс з двух прадуктаў паспяхова вывеўся на галоўнай старонцы.

Адчынiце ваша прыкладанне са студэнтамі. Стварыце файл StudentsList.jsx у папцы students.

Атрымайце студэнтаў з store з дапамогай хука useSelector, як апісана ў уроку. Адлюструйце ўсе палі з інфармацыяй пра студэнтаў з стэйту, скарыстаўшыся map.

Імпартуйце атрыманы кампанент StudentsList у root.jsx і выведзiце яго на галоўнай старонцы. Пераканайцеся, што ўся інфармацыя пра студэнтаў адлюстравалася на экране.

Беларуская
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 для працы сайта, аналітыкі і персаналізацыі. Апрацоўка дадзеных адбываецца згодна Палітыкай канфідэнцыяльнасці.
прыняць усе наладзіць адхіліць