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.