Redux හි store සිට දත්ත සංරචකයකට ලබා ගැනීම

මෙම පාඩමේදී අපි store තුළ ඇති දත්ත React සංරචකයක අඩංගු කරන්නෙමු.

අපගේ නිෂ්පාදන ඇප් එක විවෘත කර, parts/products ෆෝල්ඩරයට ගොස් එහි ProductsList.jsx යන ගොනුව සාදමු. පළමුව අපි එයට useSelector කොකුව ආයාත කරමු, එය භාවිතා කර store තුළින් දත්ත ලබා ගනිමු:

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

දැන් අපි store තුළින් නිෂ්පාදන ලබා ගනිමු. කාර්යය-තෝරන්නෙක් වෙනම නිර්මාණය නොකර, එහි කේතය වහාම useSelector සඳහා පරාමිතිය ලෙස ලියන්නෙමු:

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

ඉන්පසු අපි නිෂ්පාදන සම්මත ක්‍රමය භාවිතා කර ProductsList ශ්‍රිතයේ ශරීරය තුළ නිෂ්පාදන ලබා ගැනීමෙන් පසු පේළියෙන් පසුව ප්‍රදර්ශනය කරමු, 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>මිල: {product.price}</p>
    <p>ප්‍රමාණය: {product.amount}</p>
  </div>
))

පහත දැක්වෙන පිටු සැකසුම තුළ dispProducts ප්‍රදර්ශනය කරමු:

parts/products/ProductsList.jsxreturn (
  <div>
    <h2>නිෂ්පාදන</h2>
    {dispProducts}
  </div>
)

දැන් අපගේ නිෂ්පාදන ලැයිස්තුව ප්‍රධාන පිටුවේ ප්‍රදර්ශනය කිරීමට ඉතිරිව ඇත. root.jsx ගොනුව විවෘත කර ශීර්ෂකය නිවර්තනය කරමු:

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

මෙයට:

app/root.jsx<h2>මගේ නිෂ්පාදන ඇප් එක</h2>

ඉන්පසු ProductsList සංරචකය ගොනුවට ආයාත කරමු:

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

එය main-page අයඩී ඇති ඩිව් එකට hr ටැගය වසා දැමීමෙන් පසුව වහාම ඇතුල් කරමු:

app/root.jsx<ProductsList />

අපගේ ඇප් එක දියත් කරමු. නිෂ්පාදන දෙකෙන් යුත් අපගේ ලැයිස්තුව ප්‍රධාන පිටුවේ සාර්ථකව ප්‍රදර්ශනය විය.