Redux-এ store থেকে কম্পোনেন্টে ডেটা পাওয়া

এই সেশনে আমরা React কম্পোনেন্টে store থেকে ডেটা প্রদর্শন করব।

আমাদের পণ্য অ্যাপ্লিকেশনটি খুলুন, ফোল্ডারে যান 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>Price: {product.price}</p>
    <p>Amount: {product.amount}</p>
  </div>
))

এবং নীচে নিম্নলিখিত মার্কআপে dispProducts প্রদর্শন করব:

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

এখন শুধু আমাদের পণ্যের তালিকাটি মূল পৃষ্ঠায় প্রদর্শন করতে হবে। ফাইলটি খুলুন root.jsx এবং শিরোনামটি সংশোধন করুন:

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

নিম্নলিখিতটি করুন:

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

তারপর ফাইলে ProductsList কম্পোনেন্টটি ইম্পোর্ট করুন:

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

এবং এটি hr ক্লোজিং ট্যাগের পরেই main-page আইডি সহ div-তে ঢোকান:

app/root.jsx<ProductsList />

আমাদের অ্যাপ্লিকেশন চালু করুন। আমাদের দুটি পণ্যের তালিকা সফলভাবে মূল পৃষ্ঠায় প্রদর্শিত হয়েছে।