Komponentda Redux store'dan ma'lumot olish

Ushbu mashg'ulotda biz store'dan ma'lumotlarni React komponentida chiqaramiz.

Mahsulotlar bilan ilovamizni ochamiz, parts/products papkasiga kiramiz va uning ichida ProductsList.jsx faylini yaratamiz. Boshlanish uchun unga useSelector hookini import qilamiz, uning yordamida biz store'dan ma'lumot olamiz:

import { useSelector } from 'react-redux'

Endi store'dan mahsulotlarni olamiz. Funksiya-selektorni alohida yaratmaymiz, uning kodini useSelector parametrida yoza olaylik:

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

Keyin biz mahsulotlarni ProductsList funksiyasi tana qismida mahsulotlarni olish qatoridan keyin standart usulda chiqaramiz, map dan foydalangan holda:

const dispProducts = products.map((product) => (
	<div key={product.id}>
		<h3>{product.name}</h3>
		<p>{product.desc.substring(0, 100)}</p>
		<p>Narx: {product.price}</p>
		<p>Miqdor: {product.amount}</p>
	</div>
))

Va pastda dispProducts ni quyidagi verstkada chiqaramiz:

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

Endi bizning mahsulotlar ro'yxatimizni asosiy sahifada ko'rsatish qoldi. root.jsx faylini ochamiz va sarlavhani o'zgartiramiz:

<h2>Bu mening birinchi Redux ilovam!</h2>

Quyidagiga:

<h2>Mening Mahsulotlar Ilovam</h2>

Keyin faylga ProductsList komponentini import qilamiz:

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

Va uni main-page id'li divga hr yopilgan teggidan keyin darhol joylaymiz:

<ProductsList />

Ilovamizni ishga tushiramiz. Bizning ikkita mahsulotdan iborat ro'yxatimiz asosiy sahifada muvaffaqiyatli chiqdi.

Talabalar bilan ilovangizni oching. students papkasida StudentsList.jsx faylini yarating.

Darsda tavsiflanganidek, useSelector hooki yordamida store'dan talabalarni oling. map dan foydalanib, statedagi talabalarning barcha maydonlarini ko'rsating.

Olingan StudentsList komponentini root.jsx ga import qiling va uni asosiy sahifada chiqaring. Talabalar haqidagi barcha ma'lumotlar ekranda ko'rsatilganligiga ishonch hosil qiling.