Kupata Data kutoka Store kwenye Komponenti katika Redux

Katika kipindi hiki tutaonyesha data kutoka kwenye store katika komponenti ya React.

Wazi programu yetu ya bidhaa, ingia kwenye folda parts/products na uunde ndani yake faila ProductsList.jsx. Kwa mwanzo tuingize ndani yake hook useSelector, ambayo tutatumia kupata data kutoka kwenye store:

parts/products/ProductsList.jsximport { useSelector } from 'react-redux'

Sasa tupate bidhaa kutoka kwenye store. Kazi-ya-uteuzi hatutaiunda tofauti, tutaandika msimbo wake moja kwa moja kwenye parameta ya useSelector:

parts/products/ProductsList.jsxexport const ProductsList = () => {
  const products = useSelector((state) => state.products)
}

Kisha tutaonyesha bidhaa kwa njia ya kawaida katika mwili wa kazi ProductsList baada ya mstari wa kupata bidhaa, kwa kutumia map:

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

Na chini tuonyeshe dispProducts kwenye muundo ufuatao:

parts/products/ProductsList.jsxreturn (
  <div>
    <h2>Bidhaa</h2>
    {dispProducts}
  </div>
)

Sasa inabakia kuonyesha orodha yetu ya bidhaa kwenye ukurasa wa kwanza. Wazi faila root.jsx na utengeneze kichwa:

app/root.jsx<h2>This is my first Redux app!</h2>

Kwa ifuatayo:

app/root.jsx<h2>Programu Yangu ya Bidhaa</h2>

Kisha tuingize kwenye faili komponenti ProductsList:

app/root.jsximport { ProductsList } from '../parts/products/ProductsList'

Na uiingize kwenye div yenye kitambulisho main-page mara moja baada ya tagi inayofunga hr:

app/root.jsx<ProductsList />

Tuanzishe programu yetu. Orodha yetu ya bidhaa mbili imeonyeshwa kwa mafanikio kwenye ukurasa wa kwanza.