Redux တွင် component အတွင်း store မှ အချက်အလက်များရယူခြင်း

ဤသင်ခန်းစာတွင် React component အတွင်းသို့ store မှအချက်အလက်များထုတ်ပြမည်။

ကျွန်ုပ်တို့ၑ product များပါဝင်သော application ကိုဖွင့်ပါ၊ parts/products ဖိုလ်ဒါအတွင်းသို့ဝင်ပြီး အထဲတွင် ProductsList.jsx ဖိုင်အသစ်တစ်ခုကိုဖန်တီးပါ။ အစတွင် store မှအချက်အလက်များရယူရန်အသုံးပြုမည့် useSelector hook ကို import လုပ်ပါမည်။

import { useSelector } from 'react-redux'

ယခု store ထဲမှ product များကိုရယူကြပါစို့။ selector function ကိုသီးခြားမဖန်တီးတော့ဘဲ ၎င်း၏ကုဒ်ကို useSelector အတွက် parameter အနေဖြင့်ချက်ချင်းရေးသားပါမည်။

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

ထို့နောက် ProductsList function ၏ body အတွင်း product များရယူသည့်စာကြောင်းပြီးနောက်တွင်ရှိသော နေရာတွင် map ကိုအသုံးပြု၍ product များကို စံနည်းလမ်းဖြင့်ထုတ်ပြပါမည်။

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

အောက်တွင် dispProducts ကိုအောက်ပါ markup အတွင်းထုတ်ပြပါမည်။

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

ယခု ကျွန်ုပ်တို့၏ product list ကိုပင်မစာမျက်နှာပေါ်တွင် ပြသရန်သာကျန်ရှိတော့သည်။ root.jsx ဖိုင်ကိုဖွင့်ပြီး ခေါင်းစီးကိုပြင်ဆင်ပါမည်။

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

အောက်ပါအတိုင်းဖြစ်အောင်ပြင်ပါ။

<h2>My Products App</h2>

ထို့နောက် ProductsList component ကို ဖိုင်အတွင်းသို့ import လုပ်ပါမည်။

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

main-page id ရှိသော div အတွင်း hr tag ပိတ်ပြီးသည့်နောက်ချက်ချင်းထည့်ပါမည်။

<ProductsList />

ကျွန်ုပ်တို့၏ application ကိုစတင်လိုက်ပါ။ ကျွန်ုပ်တို့၏ product နှစ်ခုပါဝင်သော list သည် ပင်မစာမျက်နှာပေါ်တွင် အောင်မြင်စွာပေါ်လာပါသည်။

သင့်ကျောင်းသားများအတွက် application ကိုဖွင့်ပါ။ students ဖိုလ်ဒါအတွင်း StudentsList.jsx ဖိုင်ကိုဖန်တီးပါ။

သင်ခန်းစာတွင်ဖော်ပြထားသည့်အတိုင်း useSelector hook ကိုအသုံးပြု၍ store ထဲမှ ကျောင်းသားများကိုရယူပါ။ map ကိုအသုံးပြုကာ state ထဲရှိကျောင်းသား အချက်အလက်အကုန်လုံးကိုပြသပါ။

ရရှိလာသော StudentsList component ကို root.jsx သို့ import လုပ်ပြီး ပင်မစာမျက်နှာပေါ်တွင်ထုတ်ပြပါ။ ကျောင်းသားများအကြောင်းအချက်အလက်အားလုံး စခရင်ပေါ်တွင်ပေါ်လာသည်ကိုသေချာစေပါ။