Ajouter un réducteur à une application Redux

Dans la leçon précédente, nous avons créé un composant UserReaction afin que chaque produit ait également des réactions utilisateurs. Maintenant, nous devons écrire un réducteur qui gérera le compteur de réactions lorsqu'un utilisateur cliquera sur le bouton de l'une ou l'autre réaction.

Ouvrons notre application avec les produits, et dans celle-ci le fichier productsSlice.js contenant tous les réducteurs. Maintenant, dans la propriété reducers créons un autre réducteur reactionClicked (nous pouvons le placer en premier - avant productAdded, bien que cela n'ait pas d'importance). Comme d'habitude, passons-lui en paramètres state et action :

reactionClicked(state, action) {},

Et maintenant, à l'intérieur des accolades que nous avons laissées vides à l'étape précédente, écrivons son code. Tout d'abord, nous extrairons l'id du produit de payload de l'objet action et le nom de la réaction :

const { productId, reaction } = action.payload

Ensuite, à partir de l'état (state) transmis, obtenons le produit concerné :

const currentProduct = state.find(product => product.id === productId)

Et si un tel produit existe, alors augmentons la valeur de la réaction transmise de 1 :

if (currentProduct) {
	currentProduct.reactions[reaction]++
}

Voilà, notre code pour reactionClicked est prêt :

reactionClicked(state, action) {
	const { productId, reaction } = action.payload
	const currentProduct = state.find(product => product.id === productId)
	if (currentProduct) {
		currentProduct.reactions[reaction]++
	}
},

Ajoutons à la fin du fichier l'exportation de l'action creator obtenu :

export const {
	reactionClicked,
	productAdded,
	productUpdated
} = productsSlice.actions

Il est nécessaire de noter ici deux points importants. Comme vous vous en souvenez des leçons précédentes - mettre à jour directement la valeur de cette manière dans le code du réducteur est interdit (regardez cette ligne : reactions[reaction]++), mais nous pouvons nous le permettre, parce que nous le faisons à l'intérieur de createSlice, qui utilise la bibliothèque Immer. Celle-ci se chargera de transformer notre code en une mise à jour "sécurisée" de la valeur. Cela nous permet d'écrire des choses complexes de manière plus simple.

La prochaine chose à retenir - l'objet action doit contenir le minimum d'informations nécessaire - seulement pour indiquer ce qui s'est passé. Il ne faut pas y faire de calculs. Tous les calculs pour mettre à jour l'état (state) doivent être faits dans le réducteur, on peut y écrire autant de logique que nécessaire pour cela.

Ouvrez votre application avec les étudiants et dans le fichier studentsSlice.js ajoutez un autre réducteur voteClicked dans le champ reducers, comme montré dans la leçon. Écrivez le code pour celui-ci. La tâche de votre réducteur - lors d'un clic, augmenter la valeur de vote (ou du vote) sur lequel on a cliqué, pour cet étudiant, de 1.

À la fin du fichier, n'oubliez pas d'exporter l'action creator obtenu voteClicked.