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ň:

parts/products/ProductsList.jsximport { 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:

parts/products/ProductsList.jsxexport 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:

parts/products/ProductsList.jsxconst 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:

parts/products/ProductsList.jsxreturn (
  <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ň:

app/root.jsx<h2>Bu meniň ilkinji Redux programmam!</h2>

Töweregine:

app/root.jsx<h2>Meniň Önümler Programmam</h2>

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

app/root.jsximport { 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ň:

app/root.jsx<ProductsList />

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