Redux හි slice එකෙන් දත්ත නැවත නැවත භාවිතා කිරීම
පසුගිය පාඩමේදී අපි නිෂ්පාදනයක් එකතු කිරීම සඳහා වූ පෝරමයට එය ලැයිස්තුගත කරන විකුණුම්කරුවෙකු තෝරා ගැනීම සඳහා ඩ්රොප්ඩවුන් ලැයිස්තුවක් සහිත තවත් ක්ෂේත්රයක් එකතු කළෙමු. දැන් අපට මෙම තොරතුරු ඇප් එකේ තවත් ස්ථාන කිහිපයක පෙන්වීමට අවශ්ය යැයි සිතමු. මේ සඳහා අපි සෑම අවස්ථාවකම කේතය පිටපත් නොකර, සරලවම වෙනම සංරචකයක් සාදන්නෙමු, එහිදී අපි දත්ත slice එකෙන් ලබාගෙන අවශ්ය ස්ථානවල ප්රදර්ශනය කරමු.
අපේ නිෂ්පාදන ඇප් එක විවෘත කරමු.
දැන් අපි products ෆෝල්ඩරය තුළ
තවත් ගොනුවක් සාදමු: SellerOfProd.jsx. පළමුව
අපි useSelector hook එක ආයාත කරමු, එය භාවිතා කර
අවශ්ය නිෂ්පාදනය සහිත slice එක ලබා ගනිමු:
import { useSelector } from 'react-redux'
ඉන්පසු store එකෙන් අවශ්ය නිෂ්පාදනය විකුණුම්කරුවෙකුගේ id අනුව ලබා ගනිමු, එය අපි අපගේ නව සංරචකයට props ලෙස යොමු කරමු:
export const SellerOfProd = ({ sellerId }) => {
const seller = useSelector((state) =>
state.sellers.find((seller) => seller.id === sellerId)
)
}
එවැනි විකුණුම්කරුවෙකු සිටින අවස්ථාවේදී,
අපි ඔහුගේ නම ආපසු ලබා දෙමු,
නැත්නම් අපි 'unknown' ආපසු ලබා දෙමු:
return <span>by {seller ? seller.name : 'unknown'}</span>
දැන් අපි අපේ නව
සංරචකය ProductsList.jsx තුළට ආයාත කර
එය ProductsList ශ්රිතය තුළ
නිෂ්පාදන නාමය සහිත ශීර්ෂයට පසුව ඇතුළු කරමු. ඔබට පෙනෙන පරිදි,
අපි එයට id එක props ලෙස ලබා දී ඇත:
<SellerOfProd sellerId={product.seller} />
දැන්, අපි අපේ ඇප් එක ආරම්භ කර,
නව නිෂ්පාදනයක් එකතු කර එය ලැයිස්තුවේ සොයා ගන්නේ නම්,
එයට විකුණුම්කරුවෙකු සිටින බව අපට දකින්නට ලැබෙන අතර,
ඇප් එක ආරම්භ කිරීමේදී ස්වයංක්රීයව එකතු වූ නිෂ්පාදන සඳහා
'unknown' පෙන්වනු ඇත.
කුඩා අවසාන නොට්: ඔබේ eslint
VS Code සංස්කාරකයේ sellerId ගැන පැමිණිලි කරන්නේ නම්,
ඇප් එක ක්රියාත්මක වන විට, ඔබට
එය නොසලකා හැරිය හැකිය හෝ ඔබේ ඇප් එකේ
.eslintrc.cjs ගොනුව විවෘත කර
rules හි "react/prop-types": "off" එකතු කරන්න.
ස්වයංමේය ලෙසම, අපි
විකුණුම්කරුවා පිළිබඳ තොරතුරු
නිෂ්පාදන පිටුවේ ද එකතු කිරීමට අවශ්ය වනු ඇත. මේ සඳහා අපි
ProductPage හි නිෂ්පාදන නාමය සහිත ශීර්ෂයට පසුව මෙම පේළිය නැවත ඇතුළු කර
සියල්ල ක්රියාත්මක වන බව පරීක්ෂා කර බලමු:
<SellerOfProd sellerId={product.seller} />
ඔබේ ශිෂ්ය ඇප් එක විවෘත කරන්න.
පාඩමේ ද්රව්ය අධ්යයනය කිරීමෙන් පසු, students ෆෝල්ඩරය තුළ
TeacherForStudent සංරචකය සඳහා ගොනුවක් සාදන්න.
අවසානයේ සංරචකය ආපසු ලබා දිය යුත්තේ
අධ්යාපනයෙකුගේ නම, සහ අසල වරහන් තුළ
ඔහු ඉගැන්වූ විෂයයයි. අවශ්ය
අධ්යාපනයා සොයා ගන්න useSelector hook එක භාවිතා කරමින්.
දී ඇති ශිෂ්යයා සඳහා අධ්යාපනයෙකු නොමැති නම්, 'anonym' පෙන්වන්න.
පෙර කාර්යයෙන් ලබාගත් සංරචකය භාවිතා කරමින් ශිෂ්ය ලැයිස්තුවේ පිටුවේ එක් එක් ශිෂ්යයා සඳහා අධ්යාපනයාගේ දත්ත පෙන්වන්න.
පෙර කාර්යයේ සිදු කළ දේම කරන්න, නමුත් තනි ශිෂ්ය පිටුවක් සඳහා.
