⊗jsrxPmWFRSD 14 of 57 menu

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

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

আমাদের পণ্য অ্যাপ্লিকেশনটি খুলুন, ফোল্ডারে যান parts/products এবং এতে একটি ফাইল তৈরি করুন ProductsList.jsx। শুরুতে এতে useSelector হুকটি ইম্পোর্ট করুন, যার সাহায্যে আমরা store থেকে ডেটা পাব:

import { useSelector } from 'react-redux'

এখন store থেকে পণ্যগুলো পাই। আমরা আলাদাভাবে সিলেক্টর ফাংশন তৈরি করব না, এর কোড সরাসরি useSelector-এর প্যারামিটারে লিখব:

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

তারপর আমরা ProductsList ফাংশনের বডিতে, পণ্য পাওয়ার লাইনের পরে, 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> ))

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

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

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

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

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

<h2>My Products App</h2>

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

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

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

<ProductsList />

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

আপনার শিক্ষার্থীদের অ্যাপ্লিকেশন খুলুন। ফোল্ডারে StudentsList.jsx ফাইল তৈরি করুন students

পাঠে বর্ণিত的那样 হুক useSelector ব্যবহার করে store থেকে শিক্ষার্থীদের পান। স্টেট থেকে শিক্ষার্থীদের সম্পর্কিত সমস্ত তথ্যের ফিল্ডগুলি map ব্যবহার করে প্রদর্শন করুন।

root.jsx-এ প্রাপ্ত StudentsList কম্পোনেন্টটি ইম্পোর্ট করুন এবং এটি মূল পৃষ্ঠায় প্রদর্শন করুন। নিশ্চিত করুন যে শিক্ষার্থীদের সম্পর্কিত সমস্ত তথ্য স্ক্রিনে প্রদর্শিত হয়েছে।

বাংলা
AfrikaansAzərbaycanБългарскиБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
আমরা সাইট পরিচালনা, বিশ্লেষণ এবং ব্যক্তিগতকরণের জন্য কুকি ব্যবহার করি। ডেটা প্রক্রিয়াকরণ গোপনীয়তা নীতি অনুযায়ী করা হয়।
সব গ্রহণ করুন কনফিগার করুন প্রত্যাখ্যান করুন