Дар Redux аз store ба компонент додаҳо гирифтан

Дар ин машғулият мо додаҳоро аз store дар компоненти React бароем.

Барномаи мо бо маҳсулотро кушода, ба folder parts/products дохил шавед ва дар он файли ProductsList.jsx эҷод кунед. Барои оғоз hook-и useSelector-ро ба он import кунед, ки бо ёрии он аз store додаҳо мегирем:

import { useSelector } from 'react-redux'

Ҳоло биёед маҳсулотро аз store гирем. Функсияи selector-ро мо ҷудо намесозем, коди онро дар параметри барои 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>Барномаи маҳсулоти ман</h2>

Пас компоненти ProductsList-ро ба файл import кунед:

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

Ва онро ба div бо id main-page фавран пас аз теги басташавандаи hr гузоред:

<ProductsList />

Барномаи худро меофарем. Рӯйхати мо аз ду маҳсулот бомуваффақият дар саҳифаи асосӣ бароида шуд.

Барномаи худро бо донишҷӯён кушоед. Файли StudentsList.jsx дар folder students эҷод кунед.

Донишҷӯёнро аз store бо ёрии hook-и useSelector гиред, тавре ки дар дарс тавсиф шудааст. Ҳамаи майдонҳо бо иттилооти дар бораи донишҷӯён аз state-ро бо истифода аз map намоиш диҳед.

Компоненти гирифташудаи StudentsList-ро ба root.jsx import кунед ва онро дар саҳифаи асосӣ бароед. Боварӣ ҳосил кунед, ки ҳамаи иттилоот дар бораи донишҷӯён дар экран намоиш дода шуд.