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 функциясынын кодун жазыңыз, ушул сабактагы материалга окшош.