Иловаи мантиқи иловагӣ ба барномаи Redux

Дар ин дарс мо охирин компонеиитро ба барномаи худ илова мекунем. Агар мушаххас бошад, мо ба маҳсулот вокуниши корбарро илова мекунем, ки ё онро фармоиш додааст, ё дар бораи он маълумот хондааст.

Биёед барномаи маҳсулоти худро кушоем. Ҳамон тавре ки дар номи фурӯшанда буд, ба мо лозим аст, ки вокуниши корбаронро дар якчанд ҷойҳои барнома нишон диҳем. Ва ин маънои онро дорад, ки ба мо компонеити ҷудого лозим аст. Аз ин рӯ, аз ин сар мекунем, ки дар ҷузвдон products файл созем UserReactions.jsx. Биёед аввал дар он объектро нависем, ки дар он вокунишҳои мо бошанд:

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

Ва дар поён навиштани функсияро оғоз кунем, ки дар он слайсро интиқол медиҳем product:

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

Акнун дар қавсҳои каҷ чунбаки функсияи UserReactions-ро нависем. Барои ин бо истифода аз map ҷуфтҳои калид-қимати reactionObj-и худро такрор мекунем, барои ҳар яке нишонаро барои тугма ('+', '+/-' ё '-') ва арзиши рақамии ин ё он вокунишро мегирем (онро мо аз product дар store ба номи вокуниш мекашем):

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, ҳамчун нишона барои тугмаҳо.

Дар поёни файл пас аз муайян кардани объект votesObj рамзи функсияи UserVotes-ро нависед, ба монанди материал аз ин дарс.