Redux හි පෝරමයට වෙනස්කම් ඇතුළත් කිරීම

මෙම පාඩමේදී, අපි නිෂ්පාදනයක් එකතු කිරීමේ පෝරමයේ වික්‍රෙතයක් පිළිබඳ තොරතුරු ප්‍රදර්ශනය කිරීමේ කාර්යය අවසන් කරමු. මේ සඳහා, අපට පෝරමයේ HTML අක්ෂර වින්‍යාසය සුළු වශයෙන් වෙනස් කිරීමට ඉතිරිව ඇත.

අපගේ නිෂ්පාදන ඇප් එක විවෘත කරමු, තුළින් NewProductForm.jsx ගොනුව විවෘත කරමු. අපි return විධානයට පෙර කේත කොටසක් එකතු කරමු වික්‍රෙතය තෝරා ගැනීමට භාවිතා කරන පතන ලැයිස්තුවේ HTML අක්ෂර වින්‍යාසය සඳහා. අපි එය සාමාන්‍ය ක්‍රමයෙන් ක්‍රියාත්මක කරමු map සමඟ:

const sellersList = sellers.map((seller) => (
	<option key={seller.id} value={seller.id}>
		{seller.name}
	</option>
))

දැන් අපි සැබෑ HTML අක්ෂර වින්‍යාසය වෙනස් කරමු. මේ සඳහා පෝරමය තුළ පළමු හා දෙවන යටි ලිපි අතර (නම සඳහා HTML අක්ෂර වින්‍යාස කොටස් අතර සහ නිෂ්පාදනයේ විස්තරය) අපි පහත HTML අක්ෂර වින්‍යාසය සහිත යටි ලිපියක් ඇතුළත් කරමු:

<p>
	<label htmlFor="prodSeller">වික්‍රෙතය:</label>
	<select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
		<option value=""></option>
		{sellersList}
	</select>
</p>

දැන් අපට අපගේ ඇප් එක ආරම්භ කළ හැකිය. එකතු කිරීමේ පෝරමය තුළ අපට වික්‍රෙතයන්ගේ ලැයිස්තුවක් දිස්වේ. අපි පෝරමය දත්තවලින් පුරවා, ඔවුන්ගෙන් කෙනෙකු තෝරාගෙන සුරැකීමේ බොත්තම මත ක්ලික් කිරීමට උත්සාහ කරමු. දැන්, අපි Redux DevTools වෙත බැලුවහොත්, අපට වෙනස්කම් දකිනු ඇත - නව එකතු කරන ලද නිෂ්පාදනයේ දේපලක් ඇත seller තෝරාගත් වික්‍රෙතයේ id සමඟ අගය ලෙස. ඒ හා සමානව, State ටැබයේ දැන් කොටස් දෙකක් ප්‍රදර්ශනය වේ products සහ sellers.

ඔබගේ ශිෂ්‍ය ඇප් එක විවෘත කරන්න. NewStudentForm.jsx ගොනුව තුළ, සාදන්න පතන ලැයිස්තුව teachersList map භාවිතා කරමින්, එහි ඇඟවුම්කරුවන්ගේ සම්පූර්ණ නම් පාඩමේ දක්වා ඇති පරිදි අඩංගු වනු ඇත.

HTML අක්ෂර වින්‍යාසය වෙනස් කරන්න, එකතු කිරීමෙන් ඇඟවුම්කරුවන් සමඟ පතන ලැයිස්තුව ප්‍රදර්ශනය කිරීම සඳහා තවත් බ්ලොක් එකක්.

ඔබගේ ඇප් එක ආරම්භ කරන්න. පෝරමය තුළ ශිෂ්‍යයකු එකතු කිරීම සඳහා ඔබට ඇඟවුම්කරුවන් සමඟ පතන ලැයිස්තුවක් දිස්විය යුතුය,