Orodha ya Wauzaji kwenye Redux

Katika masomo yaliyopita tulimaliza na nyenzo kuu. Sasa kwa kutumia thunk tunapata orodha ya bidhaa kutoka kwa seva na tunaweza kuhifadhi bidhaa mpya kwenye seva. Hebu tuchambue wauzaji. Hakika tunapata data pia kwa ajili yao. Hebu tufanye ukurasa tofauti wenye orodha ya wauzaji.

Wacha tufungue programu yetu ya bidhaa, na kwenye hayo folda sellers. Tutengeneze kwenye folda hii faili SellersList.jsx. Hapa tutakuwa tunatumia useSelector, Link na selectAllSellers, msimbo ambao tutaandika kwenye sellersSlice.js baadaye kidogo:

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

Kisha tutengeneze SellersList yenyewe. Ndani yake tutapata wauzaji wote kwa kutumia kuingiza useSelector, kisha tutapata muundo wa orodha ya wauzaji kwenye kitanzi map, jina la kila mwuaji litakuwa linaelekeza kwenye ukurasa wake. Na mwisho tutarudisha muundo wenye kichwa na orodha iliyopatikana:

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>Wauzaji:</h2>

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

Kisha wacha tuingie kwenye faili sellersSlice.js na kwa mfano wa wachaguzi kwenye productsSlice.js tutengeneze mwishoni kabisa mwa faili wachaguzi wawili baada ya kuhamisha reducer:

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

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

Sasa inatubidi tuandike njia ya ukurasa wa orodha, kwa hili tufungue faili App.jsx na kwenye safu ya njia za watoto children tuongeze kitu kingine (usisahau kuhamisha kipengele SellersList):

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

Ili kiungo chetu 'Wauzaji' kwenye menyu kianze kufanya kazi, wacha tuingie kwenye faili root.jsx (ni muda mrefu sana ... ) na tubadilishe lebo a na kipengele NavLink:

<NavLink to="/sellers" end>
	Wauzaji
</NavLink>

Na ya mwisho. Ili kwenye menyu yetu kiungo kilichowaka kijulikane, na iwe wazi tulipo ukurasani gani, tutaongeza mtindo kwenye index.css:

nav a.active {
	color: purple;
}

Wacha tuanzishe programu yetu. Sasa tunaweza kuingia kwenye ukurasa wa wauzaji, kwa kubofya 'Wauzaji' kwenye menyu. Kabla ya hapo, bila shaka, inabidi ubofye 'Bidhaa' kwenye menyu, vinginevyo bidhaa zetu hazitapakuliwa. Katika somo linalofuata tutafanya ukurasa kwa kila mwuaji na kumaliza somo la mafunzo haya ya Redux.

Fungua programu yako ya wanafunzi. Ukichambua nyenzo za somo, kwenye folda teachers tengeneza faili TeachersList.jsx. Kwa kutumia kipengele hiki utaorodhesha orodha ya walimu. Hamisha ndani yake vipengele na viingizio muhimu.

Andika msimbo wa kipengele TeachersList, upate ndani yake walimu wote na ufanye orodha ya walimu teachersToRender, wacha kwenye kila mstari wa orodha hii ionyeshe majina yao ya familia na herufi za kwanza, na kwenye mabano somo ambalo wanafundisha. Wacha kila jina kamili kiwe kiungo, kinachoelekeza kwenye ukurasa tofauti kwa kila mwalimu. Kisha mwishoni mwa msimbo wa kipengele urudishe muundo wenye kichwa na orodha iliyotengenezwa.

Mwishoni mwa faili teachersSlice.js tengeneza jozi ya vitendakazi-wachaguzi selectAllTeachers na selectTeacherById, kama inavyoonyeshwa kwenye somo.

Kwenye App.jsx unganisha njia nyingine ya mtoto kwa ukurasa wa walimu.

Kwenye faili root.jsx kwenye menyu kwa 'Walimu' badilisha lebo a na NavLink, kama inavyoonyeshwa kwenye somo. Fanya ili kiungo kinachowaka kwenye menyu kijulikane kwa namna fulani, ukiongeza kwa ajili hiyo mitindo kwenye index.css.