⊗jsrxPmWFRSD 14 of 57 menu

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:

import { 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:

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

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> ))

Na chini tuonyeshe dispProducts kwenye muundo ufuatao:

return ( <div> <h2>Bidhaa</h2> {dispProducts} </div> )

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

<h2>This is my first Redux app!</h2>

Kwa ifuatayo:

<h2>Programu Yangu ya Bidhaa</h2>

Kisha tuingize kwenye faili komponenti ProductsList:

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

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

<ProductsList />

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

Wazi programu yako ya wanafunzi. Unda faili StudentsList.jsx kwenye folda students.

Pata wanafunzi kutoka kwenye store kwa kutumia hook useSelector, kama ilivyoelezwa kwenye somo. Onyesha sehemu zote zenye taarifa kuhusu wanafunzi kutoka kwenye state, ukitumia map.

Ingiza komponenti iliyopatikana StudentsList kwenye root.jsx na uiangazie kwenye ukurasa wa kwanza. Hakikisha kuwa taarifa zote kuhusu wanafunzi zimeonekana kwenye skrini.

Kiswahili
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Tunatumia kuki kwa ajili ya uendeshaji wa tovuti, uchambuzi na ubinafsishaji. Usindikaji wa data unafanyika kulingana na Sera ya Faragha.
kubali yote sanidi kataa