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

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

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

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

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

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

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

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

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

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

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

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

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

app/root.jsx<h2>My Products App</h2>

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

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

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

app/root.jsx<ProductsList />

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