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 файлын жасаңыз. Файлдың басында екі қасиеті - leader және captain бар votesObj объектісін жасаңыз, олардың мәндері GL және TC болсын, яғни түймелердің белгісі ретінде.

Объектті анықтағаннан кейін файлда votesObj төменге UserVotes функциясының кодын, осы сабақтың материалына ұқсас жазыңыз.