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

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

ထို့နောက် sellersSlice.js ဖိုင်သို့ ဝင်ပြီး productsSlice.js ရှိ selector များနှင့် တူညီစွာ reducer တင်ပို့ပြီးနောက် ဖိုင်အဆုံးတွင် selector နှစ်ခုကို ဖန်တီးပါမည်။

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

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

ယခုအခါ ကျွန်ုပ်တို့သည် စာရင်းစာမျက်နှာအတွက် လမ်းကြောင်းကို သတ်မှတ်ရန် လိုအပ်သည်၊ ဤအတွက် App.jsx ဖိုင်ကို ဖွင့်ပြီး မြေအောက်လမ်းကြောင်းများ၏ array children အတွင်းသို့ object အသစ်တစ်ခု ထည့်ပါမည် (SellersList component ကို import လုပ်ရန် မမေ့ပါနှင့်)။

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

ကျွန်ုပ်တို့၏ မီနူးရှိ လင့်ခ် 'Sellers' စတင်အလုပ်လုပ်စေရန်၊ root.jsx ဖိုင်သို့ ဝင်ကြပါစို့ (ကြာပြီနော် ... ) နှင့် a tag ကို NavLink element ဖြင့် အစားထိုးပါမည်။

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

နောက်ဆုံးအနေဖြင့်။ ကျွန်ုပ်တို့၏ မီနူးတွင် တက်ကြွသော လင့်ခ်ကို မီးမောင်းထိုးပြရန်၊ နှင့် ကျွန်ုပ်တို့ ဘယ်စာမျက်နှာပေါ်တွင် ရှိနေသည်ကို နားလည်စေရန်၊ ကျွန်ုပ်တို့သည် index.css သို့ style တစ်ခု ထည့်ပါမည်။

nav a.active {
	color: purple;
}

ကျွန်ုပ်တို့၏ အပလီကေးရှင်းကို စတင်လိုက်ပါ။ ယခုအခါ ကျွန်ုပ်တို့သည် ရောင်းချသူများစာရင်းစာမျက်နှာသို့ ဝင်ရောက်နိုင်ပြီဖြစ်သည်၊ မီနူးရှိ 'Sellers' ကို နှိပ်၍။ မလွယ်ကူမီ၊ မီနူးရှိ 'Products' ကို နှိပ်ရန် လိုအပ်ပါသည်၊ သို့မဟုတ်လျှင် ကျွန်ုပ်တို့၏ ထုတ်ကုန်များ မလာပါ။ နောက်လာမည့် သင်ခန်းစာတွင် ကျွန်ုပ်တို့သည် ရောင်းချသူတစ်ဦးချင်းစီအတွက် စာမျက်နှာကို ဖန်တီးမည် ထို့နောက် Redux အတွက် ဤသင်ခန်းစာစာအုပ် လေ့လာမှုကို အဆုံးသတ်ပါမည်။

သင်၏ ကျောင်းသားများနှင့် အပလီကေးရှင်းကို ဖွင့်ပါ။ သင်ခန်းစာ၏ ပစ္စည်းများကို လေ့လာပြီးနောက်၊ teachers ဖိုလ်ဒါအတွင်း TeachersList.jsx ဖိုင်ကို ဖန်တီးပါ။ ဤ component ကို အသုံးပြု၍ သင်၏ ဆရာများ၏ စာရင်းကို ဖော်ပြပါမည်။ ၎င်းအတွင်းသို့ လိုအပ်သော component များနှင့် hooks များကို import လုပ်ပါ။

TeachersList component အတွက် ကုဒ်ကို ရေးပါ၊ ဆရာအားလုံးကို ၎င်းအတွင်း ရယူပြီး ဆရာများ၏ စာရင်း teachersToRender ကို ဖန်တီးပါ၊ ဤစာရင်းရှိ တစ်ကြောင်းချင်းစီတွင် သူတို့၏ အမည်များနှင့် အတိုကောက်များ ပြသပါစေ၊ ထို့အပြင် ကွင်းသပ်ခတ်ထားသော ဘာသာရပ်များ၊ သူတို့ သင်ကြားပို့ချသည်များ။ သူတို့၏ အမည်အပြည့်အစုံတိုင်းကို လင့်ခ်တစ်ခုဖြစ်စေပါ၊ ၎င်းသည် သီးခြား စာမျက်နှာသို့ ညွှန်ပြပါစေ။ ထို့နောက် component ၏ကုဒ်အဆုံးတွင် ခေါင်းစဉ်နှင့် ဖန်တီးထားသောစာရင်းပါ ပြင်ဆင်ရေးကို ပြန်ပေးပါ။

teachersSlice.js ဖိုင်၏အဆုံးတွင် selector function များဖြစ်သော selectAllTeachers နှင့် selectTeacherById တို့ကို သင်ခန်းစာတွင် ပြထားသည့်အတိုင်း ဖန်တီးပါ။

App.jsx တွင် ဆရာများစာရင်းစာမျက်နှာအတွက် နောက်ထပ် မြေအောက်လမ်းကြောင်း တစ်ခုကို ချိတ်ဆက်ပါ။

root.jsx ဖိုင်တွင် မီနူးအတွက် 'Teachers' အတွက် a tag ကို NavLink ဖြင့် အစားထိုးပါ၊ သင်ခန်းစာတွင် ပြထားသည့်အတိုင်း။ မီနူးရှိ တက်ကြွနေသော လင့်ခ်ကို ထင်ရှားစေရန်၊ index.css သို့ ထည့်ရန် style များကို ဖန်တီးပါ။