Adición de lógica adicional en una aplicación Redux

En esta sesión agregaremos el último componente a nuestra aplicación. Para ser específicos, agregaremos al producto la reacción de un usuario que lo ha pedido o ha leído información sobre él.

Abramos nuestra aplicación de productos. Al igual que con el nombre del vendedor, necesitamos mostrar las reacciones de los usuarios en varios lugares de la aplicación. Y eso significa que necesitaremos un componente separado. Por lo tanto, comencemos por crear en la carpeta products un archivo UserReactions.jsx. Para empezar, escribamos en él un objeto que contendrá nuestras reacciones:

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

Y a continuación comencemos a escribir la función misma, a la cual pasaremos el slice product:

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

Ahora entre las llaves escribamos el cuerpo de la función UserReactions. Para esto iteremos usando map los pares clave-valor de nuestro reactionObj, para cada una obtendremos la designación para el botón ('+', '+/-' o '-') y el valor numérico de una u otra reacción (lo extraeremos de product en el store por el nombre de la reacción):

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

Y después de esto, al final del código de la función retornemos el markup con los botones userReactions:

return <div>{userReactions}</div>

Y también agreguemos un poco más de estilos a index.css:

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

Si esto parece un poco confuso, no se preocupe, más adelante todo se volverá mucho más claro para usted.

Abra su aplicación de estudiantes. En su aplicación existirá la posibilidad para que los usuarios elijan entre los estudiantes al delegado de grupo y al capitán del equipo deportivo. Por lo tanto, después de estudiar los materiales de la lección, cree en la carpeta students el archivo UserVotes.jsx. Al principio del archivo cree un objeto votesObj, en el cual tendrá dos propiedades - leader y captain, con valores GL y TC, como designación para los botones.

Más abajo en el archivo, después de la definición del objeto votesObj escriba el código de la función UserVotes, por analogía con el material de esta lección.