Redux'то компонентте store'дон маалымат алуу

Бул сабакта биз маалыматтарды 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>Баасы: {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 />

Колдонмомузду иштетебиз. Биздин эки продукциянын тизмеси башкы баракчада ийгиликтүү чыкты.

Студенттер менен колдонмоңузду ачыңыз. StudentsList.jsx файлын папкада түзүңүз students.

useSelector хукунун жардамы менен store'дон студенттерди алыңыз, сабакта сүрөттөлгөндөй. стейттен студенттер жөнүндөгү бардык маалымат талааларын көрсөтүңүз, пайдалануу менен map.

Алынган компонентти импорттоңуз StudentsList root.jsx жана аны башкы баракчада чыгарыңыз. Ишениңиз, студенттер жөнүндөгү бардык маалымат экранда көрсөтүлдү.