Ajouter une logique supplémentaire à l'application Redux

Lors de cette leçon, nous ajouterons le dernier composant à notre application. Pour être plus précis, nous ajouterons au produit la réaction de l'utilisateur, qui l'a soit commandé, soit lu des informations à son sujet.

Ouvrons notre application avec les produits. Comme pour le nom du vendeur, nous devons afficher les réactions des utilisateurs à plusieurs endroits de l'application. Cela signifie que nous aurons besoin d'un composant séparé. Donc, commençons par créer dans le dossier products le fichier UserReactions.jsx. Commençons par y définir un objet qui contiendra nos réactions :

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

Et ci-dessous, commençons à écrire la fonction elle-même, dans laquelle nous passerons le slice product :

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

Maintenant, entre les accolades, écrivons le corps de la fonction UserReactions. Pour cela, parcourons les paires clé-valeur de notre reactionObj à l'aide de map, pour chacune nous obtiendrons un libellé pour le bouton ('+', '+/-' ou '-') et la valeur numérique de telle ou telle réaction (nous l'extrairons de product dans le store par le nom de la réaction) :

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

Et après cela, à la fin du code de la fonction, retournons le rendu avec les boutons userReactions :

return <div>{userReactions}</div>

Et ajoutons également un peu plus de styles dans index.css :

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

Si cela semble un peu déroutant, ne vous inquiétez pas, cela deviendra beaucoup plus clair par la suite.

Ouvrez votre application avec les étudiants. Votre application permettra aux utilisateurs de choisir parmi les étudiants le délégué de groupe et le capitaine de l'équipe sportive. Donc, après avoir étudié le matériel de la leçon, créez dans le dossier students le fichier UserVotes.jsx. Au début du fichier, créez un objet votesObj, dans lequel vous aurez deux propriétés - leader et captain, avec les valeurs GL et TC, en tant que libellés pour les boutons.

Ci-dessous dans le fichier, après la définition de l'objet votesObj, écrivez le code de la fonction UserVotes, par analogie avec le matériel de cette leçon.