Redux иловасига қўшимча мантиқ қўшиш

Бу машғулотда биз иловамизга охирги компонентни қўшамиз. Аниқ рўйхат қиламиз, биз маҳсулотга уни ёки буюртма қилган ёки унинг ҳақида маълумот ўқиган фойдаланувчининг реакциясини қўшамиз.

Келгинг, маҳсулотларимиз иловасини очайлик. Сотувчи номида бўлгани каби, биз фойдаланувчиларнинг реакциясини илованинг бир нечта жойида кўрсатишимиз керак. Бу эса бизга алохида компонент керак бўлишини англатади. Шунинг учун products папкасида файл UserReactions.jsx яратиш билан бошлаймиз. Келгинг, аввало унда реакцияларимиз бўладиган объектни йозиш билан бошлаймиз:

const reactionObj = {
	good: '+',
	soso: '+/-',
	bad: '-',
}

Ва pastda функцияни ёзишни бошлаймиз, унга биз product слайсини ўтказамиз:

export const UserReactions = ({ product }) => {}

Энди жиғма-жиғмақ қавс ичида функциянинг танасини UserReactions йозамиз. Бунинг учун map ёрдамида бизнинг reactionObj объектимизнинг калит-қиймат жуфтларини айлантирамиз, ҳар бири учун тугма белгисини оламиз ('+', '+/-' ёки '-') ва турли реакцияларнинг сон қийматини (уни биз store даги product дан реакция номи бўйича тортиб оламиз):

const userReactions = Object.entries(reactionObj).map(([name, image]) => {
	return (
		<button key={name} type="button" className="reaction-button">
			{image} {product.reactions[name]}
		</button>
	)
})

Ва шундан сўнг функция кодининг охирида userReactions тугмалари билан версткани қайтарамиз:

return <div>{userReactions}</div>

Ва яна бир оз стиллар қўшамиз index.css га:

.reaction-button {
	margin-right: 10px;
	margin-bottom: 10px;
}

Агар бу бир оз чалкашиб кетгандек кўринса, ҳавотирланмангиз, кейинрок ҳаммаси жуда аниқ бўлади.

Сизнинг студентлар билан иловаингизни очинг. Сизнинг иловаингизда фойдаланувчилар учун студентлар орасидан гуруҳ старостаси ва спорт жамоаси капитанини танлаш имконияти бўлади. Шунинг учун, дарс материалларини ўрганиб чиққандан сўнг, students папкасида файл UserVotes.jsx яратинг. Файл бошланған жойда votesObj объектини яратинг, унда сизда иккита хосса бўлади - leader ва captain, уларнинг қийматлари GL ва TC, булар тугмалар учун белги бўлади.

Файлда объект аниқланганидан кейин pastda votesObj ушбу дарс материалыга ўхшаш UserVotes функцияси кодини ёзинг.