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

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

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

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

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

export 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 හි ඇති තෝරන්නන් සමඟ ගොනුවේ අවසානයේ දෙක්කෝ තෝරන්නන් සාදන්න රෙඩියුසරය නිර්යාත කිරීමෙන් පසු:

export const selectAllSellers = (state) => state.sellers

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

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

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

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

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

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

nav a.active {
	color: purple;
}

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

ඔබගේ ශිෂ්‍ය යෙදුම විවෘත කරන්න. පාඩම් ද්‍රව්‍ය හැදෑරීමෙන් පසු, teachers ෆෝල්ඩරය තුළ TeachersList.jsx ගොනුව සාදන්න. මේ සංරචකය භාවිතයෙන් ඔබට ගුරුවරුන්ගේ ලැයිස්තුව ප්‍රදර්ශනය කිරීමට හැකිය. එයට අවශ්‍ය සංරචක සහ හුක්ස් ආයාත කරන්න.

TeachersList සංරචකය සඳහා කේතය ලියන්න, එහි සියලුම ගුරුවරුන් ලබාගෙන ගුරුවරුන්ගේ ලැයිස්තුව teachersToRender සාදන්න. මෙම ලැයිස්තුවේ සෑම පේළියකම ඔවුන්ගේ අන්වර්ථ නාම සහ මුලකුරු ප්‍රදර්ශනය කිරීමට ඉඩ දෙන්න. වරහන් තුළ ඔවුන් ඉගැන්වූ විෂය දක්වන්න. සෑම නමක්ම සමඟ එක් එක් ගුරුවරයා සඳහා වෙනම පිටුවකට යොමු වන සබැඳියක් වේවා. ඉන්පසු සංරචක කේතය අවසානයේ ශීර්ෂකය සහිත අලංකරණය ආපසු ලබා දෙන්න.

teachersSlice.js ගොනුව අවසානයේ තෝරන්නන් යුගලයක් සාදන්න selectAllTeachers සහ selectTeacherById, පාඩමේ දැක්වූ ආකාරයට.

App.jsx හි ගුරුවරුන් සඳහා තවත් දරු මාර්ගයක් සබැඳන්න.

root.jsx ගොනුවේ මෙනුවේ 'ගුරුවරුන්' සඳහා a ටැගය වෙනුවට NavLink භාවිතා කරන්න, පාඩමේ දැක්වූ ආකාරයට. සක්‍රීය සබැඳිය යම් ආකාරයකින් ඉස්මතු වන පරිදි සකසන්න. මේ සඳහා index.css හි විලාස එකතු කරන්න.