Storeдан маълумотларини компонентда олиш (Redux)

Ушбу машғулотда биз storeдан маълумотларни React компонентида чиқарамиз.

Махсулотлар билан ишлайдиган илованимизни очийлик, parts/products папкасига кириб, унинг ичида ProductsList.jsx файлини яратамиз. Бошлаш учун унга useSelector хукни импорт қиламиз, унги ёрдамида biz storedan маълумот оламиз:

import { useSelector } from 'react-redux'

Энди storedан махсулотларни олайлик. Селектор функциясини алохида яратмаймиз, унинг кодини тўғридан-тўғри 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>Махсулотлар</h2>
		{dispProducts}
	</div>
)

Энди бизнинг махсулотлар рўйхатимизни бош саҳифада кўрсатиш қолди. Келик root.jsx файлини очиб, сарлавҳани ўзгартирамиз:

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

Куйидагига:

<h2>Менинг Mahсулотлар Иловам</h2>

Сўнгра файлга ProductsList компонентини импорт қиламиз:

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

Ва уни main-page айдисига эга бўлган дивга hr ёпилувчи тегидан кейин жойлаштирамиз:

<ProductsList />

Илованимизни ишга туширамиз. Бизнинг иккита махсулотдан иборат рўйхатимиз бош саҳифада муваффақиятли чиқди.

Сизнинг талабалар билан ишлайдиган иловангизни очинг. students папкасида StudentsList.jsx файлини яратинг.

Дарсда тавсифланганидек, useSelector хуки ёрдамида storedан талабаларни олинг. map дан фойдаланиб, стейтдан олинган талабалар ҳақидаги барча маълумот майдонларини кўрсатинг.

StudentsList компонентини root.jsx га импорт қилинг ва уни бош саҳифада кўрсатинг. Талабалар ҳақидаги барча маълумотлар экранда кўринганига ишонч ҳосил қилинг.