Redux-daky komponentde storedan maglumat alyş

Bu sapakda biz store-daky maglumaty React komponentinde görkezeris.

Önümler barada programmaçylymyzy açalyň, parts/products papkasyna giriň we onda ProductsList.jsx faýly dörediň. Ilki bilen, store-dan maglumat almak üçin peýdalanyjak useSelector güýjüni import edeliň:

import { useSelector } from 'react-redux'

Indi store-dan önümleri alalyň. Funkksiýa-selektory aýratyn döretmeris, onuň koduny gönüden-göni useSelector üçin parametrde ýazarys:

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

Soňra önümleri, standart ýoly ulanyp, ProductsList funksiýasynyň bedeninde, önümleri alýan setirden soň, görkezeris, map ulanyp:

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

Aşakda bolsa dispProducts görkezeris, aşakdaky görnüşde:

return (
	<div>
		<h2>Önümler</h2>
		{dispProducts}
	</div>
)

Indi önümler sanawymyzy baş sahypada görkezmek galýar. root.jsx faýlyny açalyň we atlandyrmany üýtgedeliň:

<h2>Bu meniň ilkinji Redux programmam!</h2>

Töweregine:

<h2>Meniň Önümler Programmam</h2>

Soňra faýla ProductsList komponentini import edeliň:

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

We ony main-page ID-sine eýe bolan div-e, ýapyjy hr teginden soňra gönüden-göni goşalyň:

<ProductsList />

Programmamyzy işledeliň. Iki önümiň sanawy baş sahypada üstünlikli görkezildi.

Talyp barada programmaçylygyňyzy açyň. students papkasyna StudentsList.jsx faýlyny dörediň.

Sapakda görkezilen ýaly, useSelector güýjüni ulanmak bilen store-dan talyplary alyň. map ulanmak bilen, state-däki talyplar baradaky ýazgy meýdanlarynyň hemmesini görkeziň.

Alynan StudentsList komponentini root.jsx faýlyna import ediň we ony baş sahypada görkeziň. Ekranda talyplar baradaky ähli maglumat görkezilendigine göz ýetiriň.