Додавање на дополнителна логика во 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, по аналогија со материјалот од оваа лекција.