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

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

අපගේ නිෂ්පාදන ඇප් එක විවෘත කර, 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>මිල: {product.price}</p>
		<p>ප්‍රමාණය: {product.amount}</p>
	</div>
))

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

return (
	<div>
		<h2>නිෂ්පාදන</h2>
		{dispProducts}
	</div>
)

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

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

මෙයට:

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

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

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

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

<ProductsList />

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

ඔබගේ ශිෂ්ය ඇප් එක විවෘත කරන්න. StudentsList.jsx ගොනුව students ෆෝල්ඩරය තුළ සාදන්න.

පාඩමේ විස්තර කර ඇති පරිදි useSelector කොකුව භාවිතා කර store තුළින් ශිෂ්යයන් ලබා ගන්න. map භාවිතයෙන් අවස්ථාවෙන් ශිෂ්යයන් පිළිබඳ තොරතුරු සහිත සියලුම ක්ෂේත්‍ර ප්‍රදර්ශනය කරන්න.

ලබාගත් StudentsList සංරචකය root.jsx වෙත ආයාත කර එය ප්‍රධාන පිටුවේ ප්‍රදර්ශනය කරන්න. තිරය මත ශිෂ්යයන් පිළිබඳ සියලු තොරතුරු ප්‍රදර්ශනය වන බවට වග බලා ගන්න.