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-ке импорттап, оны басты бетте
көрсетіңіз. Студенттер туралы барлық ақпарат
экранда көрсетілгеніне көз жеткізіңіз.