Adicionando lógica adicional ao aplicativo Redux

Nesta lição, adicionaremos o último componente ao nosso aplicativo. Para ser específico, vamos adicionar a reação do usuário ao produto, indicando se o usuário pediu ou leu informações sobre ele.

Vamos abrir nosso aplicativo de produtos. Assim como com o nome do vendedor, precisamos mostrar as reações dos usuários em vários lugares do aplicativo. Isso significa que precisaremos de um componente separado. Portanto, vamos começar criando um arquivo na pasta products chamado UserReactions.jsx. Vamos primeiro definir nele um objeto que conterá nossas reações:

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

E abaixo, vamos começar a escrever a própria função, à qual passaremos a slice product:

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

Agora, entre chaves, vamos escrever o corpo da função UserReactions. Para isso, vamos iterar usando map sobre os pares chave-valor do nosso reactionObj, para cada um obter a representação para o botão ('+', '+/-' ou '-') e o valor numérico de cada reação (vamos extraí-lo do product no store pelo nome da reação):

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

E depois disso, no final do código da função, retornaremos a marcação com os botões userReactions:

return <div>{userReactions}</div>

E também vamos adicionar mais alguns estilos em index.css:

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

Se isso parecer um pouco confuso, não se preocupe, ficará mais claro na sequência.

Abra seu aplicativo de estudantes. Seu aplicativo terá a funcionalidade para os usuários escolherem entre os estudantes o líder da turma e o capitão do time esportivo. Portanto, após estudar os materiais da lição, crie na pasta students o arquivo UserVotes.jsx. No início do arquivo, crie um objeto votesObj, que terá duas propriedades - leader e captain, com valores GL e TC, como representação para os botões.

Abaixo no arquivo, após a definição do objeto votesObj, escreva o código da função UserVotes, por analogia com o material desta lição.