Redux හි විකුණුම්කරුවන්ගේ ලැයිස්තුව

පසුගිය පාඩම්වලදී අපි ප්‍රධාන අන්තර්ගතය සමඟ අවසන් කළෙමු. දැන් thunk භාවිතයෙන් අපි සේවාදායකයෙන් නිෂ්පාදන ලැයිස්තුව ලබා ගන්නවා සහ සේවාදායකයේ නව නිෂ්පාදනයක් සුරැකිය හැකිය. අපි විකුණුම්කරුවන් සමඟ කටයුතු කරමු. සියල්ලන්ටම දත්ත ලැබෙන නිසා. විකුණුම්කරුවන්ගේ වෙනම පිටුවක් සාදා ගනිමු.

අපගේ නිෂ්පාදන යෙදුම විවෘත කරමු, සහ එහි sellers ෆෝල්ඩරය තුළ. මෙම ෆෝල්ඩරය තුළ අපි SellersList.jsx ගොනුව සාදමු. මෙහිදී අපි useSelector, Link සහ selectAllSellers භාවිතා කරමු, එහි කේතය අපි sellersSlice.js හි පසුව ලියන්නෙමු:

sellers/SellersList.jsximport { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { selectAllSellers } from './sellersSlice'

ඊළඟට අපි SellersList සාදමු. එහිදී අපි සියලුම විකුණුම්කරුවන් හූක් භාවිතයෙන් ලබා ගනිමු useSelector, ඉන්පසු ලැයිස්තුව සඳහා අලංකරණය ලබා ගනිමු map චක්‍රය තුළ, සෑම විකුණුම්කරුවෙකුගේ නමක්ම ඔවුන්ගේ පිටුවට සබැඳියක් වනු ඇත. අවසානයේ ශීර්ෂකය සහිත අලංකරණය ආපසු ලබා දෙන්න ලබාගත් ලැයිස්තුව:

sellers/SellersList.jsxexport const SellersList = () => {
  const sellers = useSelector(selectAllSellers)
  const sellersToRender = sellers.map((seller) => (
    <li key={seller.id}>
      <Link to={`/sellers/${seller.id}`}>{seller.name}</Link>
    </li>
  ))

  return (
    <div>
      <h2>විකුණුම්කරුවන්:</h2>

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

ඉන්පසු අපි sellersSlice.js ගොනුව වෙත යමු සහ සමානව productsSlice.js හි ඇති තෝරන්නන් සමඟ ගොනුවේ අවසානයේ දෙක්කෝ තෝරන්නන් සාදන්න රෙඩියුසරය නිර්යාත කිරීමෙන් පසු:

sellers/sellersSlice.jsexport const selectAllSellers = (state) => state.sellers

export const selectSellerById = (state, sellerId) =>
state.sellers.find((seller) => seller.id === sellerId)

දැන් අපට ලැයිස්තු පිටුව සඳහා මාර්ගය අර්ථ දක්වා ඇත, මේ සඳහා අපි ගොනුව විවෘත කරමු App.jsx සහ දරු මාර්ග අරාව තුළ children තවත් වස්තුවක් එකතු කරන්න (SellersList සංරචකය ආයාත කිරීමට අමතක නොකරන්න SellersList):

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

මෙනුවේ ඇති අපගේ සබැඳිය 'විකුණුම්කරුවන්' ක්‍රියාත්මක වීම සඳහා, අපි root.jsx ගොනුව වෙත යමු (කොතරම් කාලයක් එය ගත වී තිබේද ... ) සහ a ටැගය වෙනුවට NavLink අංගය භාවිතා කරමු:

app/root.jsx<NavLink to="/sellers" end>
  විකුණුම්කරුවන්
</NavLink>

අවසාන කාරණය. අපගේ මෙනුවේ සක්‍රීය සබැඳිය ඉස්මතු වන පරිදි, සහ අපි සිටින්නේ කුමන පිටුවේද යන්න වටහා ගත හැකි වන පරිදි, අපි index.css හි විලාසය එකතු කරමු:

index.cssnav a.active {
  color: purple;
}

අපගේ යෙදුම ආරම්භ කරමු. දැන් අපට විකුණුම්කරුවන්ගේ පිටුවට යා හැකිය, මෙනුවේ 'විකුණුම්කරුවන්' මත ක්ලික් කිරීමෙන්. ඊට පෙර, මෙනුවේ 'නිෂ්පාදන' මත ක්ලික් කළ යුතුය, එසේ නොමැතිනම් අපගේ නිෂ්පාදන පූරණය නොවේ. ඊළඟ පාඩමේදී අපි එක් එක් විකුණුම්කරු සඳහා වෙනම පිටුවක් සාදමු සහ මෙම Redux නිබන්ධනය හැදෑරීම එතැනින් අවසන් කරමු.