Envoi d'actions dans une application Redux

Nous avons maintenant un réducteur pour mettre à jour la tranche (slice) des réactions. Nous devons maintenant ajouter l'envoi d'une action qui se déclenchera lorsqu'un utilisateur clique sur un bouton de réaction. Mais d'abord, pour que tout fonctionne correctement, nous devons apporter quelques modifications.

Ouvrons notre application de produits, et dans celle-ci, le fichier productsSlice.js. Regardez la définition de initialState. Vous voyez ? Dans les objets, il n'y a pas de propriété pour les réactions. Corrigeons cela en définissant les compteurs de chaque réaction sur 0 :

{
	id: '1',
	title: 'Product1',
	desc: 'This is an amazing product',
	price: '300',
	amount: '30',
	reactions: {
		good: 0,
		soso: 0,
		bad: 0,
	},
},

Ajoutez vous-même la propriété reactions dans le deuxième objet d'initialisation. Nous devons également ajouter cette propriété plus bas dans le code pour le réducteur productAdded, afin que les nouveaux produits aient aussi cette fonctionnalité. Faisons cela pour sa méthode prepare :

prepare(title, desc, price, amount, sellerId) {
	return {
		payload: {
			id: nanoid(),
			title,
			desc,
			price,
			amount,
			seller: sellerId,
			reactions: {
				good: 0,
				soso: 0,
				bad: 0,
			},
		},
	}
},

Passons maintenant à l'envoi de l'action. Ouvrons le fichier UserReactions.jsx, puis importons le hook useDispatch et reactionClicked :

import { useDispatch } from 'react-redux'
import { reactionClicked } from './productsSlice'

Au début du code, dans le corps de la fonction UserReactions, première ligne (avant const userReactions ... ), écrivons :

const dispatch = useDispatch()

Et attachons au bouton de réaction l'envoi de reactionClicked lors du clic, en transmettant l'id du produit et le nom de la réaction sur laquelle on a cliqué :

<button
	key={name}
	type="button"
	className="reaction-button"
	onClick={() =>
		dispatch(reactionClicked({ productId: product.id, reaction: name }))
	}
>
	{image} {product.reactions[name]}
</button>

Il ne nous reste plus qu'à afficher le composant des réactions dans le rendu de nos pages. Faisons cela dans le fichier ProductsList.jsx avant l'élément Link :

<UserReactions product={product} />

Et de même, avant l'élément Link sur la page du produit dans le fichier ProductPage.jsx :

<UserReactions product={product} />

Maintenant que tout est en place, nous pouvons lancer notre application. Essayons de cliquer sur les boutons de réactions. Nous pouvons ajouter un nouveau produit et également cliquer sur eux. Maintenant, où que nous cliquions sur les boutons de réactions, les valeurs modifiées s'afficheront pour ce produit sur toutes les pages. Regardez la page d'un produit spécifique (sur laquelle vous avez cliqué sur les réactions) et la page de leur liste et vice versa, pour toutes les pages, le nombre de réactions pour un produit donné sera identique.

Cette leçon était la dernière du chapitre sur le travail avec les données dans Redux. Nous avons travaillé plus en profondeur avec les données dans le store Redux et nous savons maintenant comment ajouter les fonctionnalités nécessaires dans l'application et utiliser les données dans les composants React.

Ouvrez votre application avec les étudiants. Dans le fichier studensSlice.js, ajoutez aux objets d'initialisation la propriété votes avec les champs correspondants. Faites cela également pour le réducteur studentAdded.

À l'intérieur de la fonction UserVotes dans le fichier UserVotes.jsx, déclarez dispatch pour le hook useDispatch et effectuez l'envoi de l'action voteClicked lors d'un clic sur les boutons de vote, transmettez-lui l'id de l'étudiant et le nom du vote, comme montré dans la leçon.

Affichez les boutons de vote dans le rendu des composants StudentsList et StudentPage.