Redux හි වෙළෙන්දා පිටුව

කරන්න ඉතිරිව ඇත්තේ සුළු කාරියක් පමණි. අපි මෙම පාඩමෙන් අවසාන දෙය කරමු - අපගේ යෙදුමට සෑම වෙළෙන්දෙකු සඳහාම වෙනම පිටුවක් එකතු කිරීමයි. මෙහි දැනටමත් ඔබට හුරුපුරුදු ක්‍රියාමාර්ග පමණක් ඇත. අපි ආරම්භ කරමු.

අපගේ නිෂ්පාදන සමඟ යෙදුම විවෘත කරමු, එහි sellers ෆෝල්ඩරය තුළ. මෙම ෆෝල්ඩරය තුළ SellerPage.jsx ගොනුව සාදමු. දැන් අපගේ කොම්පෝනන්ටය සඳහා SellerPage කේතය ලිවීම ආරම්භ කරමු:

sellers/SellersPage.jsxexport const SellerPage = () => {}

පළමුව, වෙළෙන්දාගේ id ලබාගෙන එම id භාවිතා කරමින් slice එක තුළ අවශ්‍ය වෙළෙන්දාගේ වස්තුව සොයා ගනිමු:

sellers/SellersPage.jsxexport const SellerPage = () => {
  let params = useParams()
  const { sellerId } = params

  const seller = useSelector((state) => selectSellerById(state, sellerId))
}

ඊළඟට, SellerPage සඳහා කේතයේ පහළින්, වෙළෙන්දා ලබාගත් පසු, අපි සියලු නිෂ්පාදන ලබාගෙන ඉන්පසු මෙම වෙළෙන්දා විසින් ඉදිරිපත් කරන ලද ඒවා පමණක් තෝරා ගනිමු:

sellers/SellersPage.jsxconst productsOfSeller = useSelector((state) => {
  const allProducts = selectAllProducts(state)
  return allProducts.filter((product) => product.seller === sellerId)
})

ඊළඟට, තෝරාගත් නිෂ්පාදනවල නම් වලින්, map භාවිතා කරමින් ලැයිස්තුවක් සාදමු. එමෙන්ම මෙම ලැයිස්තුවේ ඇති සෑම නිෂ්පාදන නමක්ම එම නිෂ්පාදන පිටුවට සබැඳියක් වනු ඇත:

sellers/SellersPage.jsxconst productNames = productsOfSeller.map((product) => (
  <li key={product.id}>
    <Link to={`/products/${product.id}`}>{product.name}</Link>
  </li>
))

SellerPage සඳහා කේතය අවසානයේ, අපි HTML ව්‍යුහය ආපසු එවන්නෙමු: වෙළෙන්දාගේ නම සහිත ශීර්ෂය සහ මෙම වෙළෙන්දා විසින් ඉදිරිපත් කරන ලද නිෂ්පාදන ලැයිස්තුව:

sellers/SellersPage.jsxreturn (
  <div>
  <h2>වෙළෙන්දා: {seller.name}</h2>

  <ul>{productNames}</ul>
  </div>
)

ඇත්ත වශයෙන්ම, වෙළෙන්දා පිටුව සඳහා අපට මාර්ගයක් ද අවශ්‍යය. අපි App.jsx ගොනුව විවෘත කර එය අවසාන දරු මාර්ගය ලෙස එකතු කරමු:

App.jsx{
  path: '/sellers/:sellerId',
  element: <SellerPage />,
},

SellersPage.jsx සහ App.jsx හි අවශ්‍ය hooks සහ කොම්පෝනන්ට import කිරීමට අමතක නොකරන්න.

අපගේ යෙදුම දියත් කරමු, නිෂ්පාදන පූරණය කරමු, ඉන්පසු වම් පස මෙනුවේ ඇති 'වෙළෙන්දෝ' සබැඳිය ක්ලික් කරමු. දැන් අපට ඕනෑම වෙළෙන්දෙකුගේ පිටුවට යා හැකිය, ඔහුගේ නම ක්ලික් කිරීමෙන්, ඉන්පසු ඔහුගේ පිටුවේ ඔහුගේ සියලුම නිෂ්පාදන දැකගත හැකිය. ඔහුගේ ඕනෑම නිෂ්පාදනයක් මත ක්ලික් කිරීමෙන්, එම නිෂ්පාදනයේ පිටුවට යා හැකිය.

මේ වන විට සියල්ල අවසන්. යෙදුම් නිර්මාණය කිරීම සඳහා Redux හි පදනම් අපි අධ්‍යයනය කර ඇති අතර තරමක් ගැඹුරට ද ගියෙමු. විවිධ ප්‍රයෝජනවත් මෙවලම් සමඟ ද හඳුනාගත්තෙමු. ඔබගේ Redux යෙදුම් නිර්මාණය කිරීමේ දී වාසනාවන්ත වන්නැයි මම ප්‍රාර්ථනා කරමි!