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