Préparation des données pour l'objet action dans Redux

Récemment, nous avons discuté du fait que la fonction createSlice attend un argument lors de la création de action.payload. D'un côté, cela simplifie son utilisation, de l'autre, cela peut nécessiter des étapes supplémentaires pour préparer le contenu de l'objet action.

Ouvrons notre application de produits, et dans celle-ci, le fichier NewProductForm.jsx. Veuillez noter la ligne de code suivante :

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Ici, nous assemblons l'objet payload directement dans le composant React et le passons à l'action productAdded. Et si nous devions envoyer la même action depuis plusieurs composants ou si la logique de construction s'avérait complexe ? En principe, notre composant ne devrait pas se soucier de l'apparence de l'objet dans payload pour cette action. De plus, nous ne sommes pas satisfaits de la duplication constante du code.

Ces problèmes peuvent à nouveau être résolus par notre célèbre createSlice, puisque lors de l'écriture d'un réducteur, il nous permet d'utiliser une fonction de callback prepare, dans laquelle nous pouvons écrire diverses logiques, générer des nombres aléatoires, etc. Dans ce cas, la valeur pour le champ du réducteur peut être représentée sous la forme de l'objet suivant :

{reducer, prepare}

Ouvrons notre fichier productsSlice.js et modifions le code pour le réducteur productAdded. Maintenant, ce morceau de code :

productAdded(state, action) {
	state.push(action.payload)
},

Nous allons le changer pour le suivant, dans lequel la fonction reducer sera responsable de la mise à jour de l'état dans le store, et prepare - de renvoyer l'objet payload avec l'id généré et nos autres données :

productAdded: {
	reducer(state, action) {
		state.push(action.payload)
	},
	prepare(name, desc, price, amount) {
		return {
			payload: {
				id: nanoid(),
				name,
				desc,
				price,
				amount,
			},
		}
	},
},

Puisque nous allons maintenant générer l'id ici, et non dans le composant, ajoutons nanoid dans l'import :

import { createSlice, nanoid } from '@reduxjs/toolkit'

Enfin, apportons les modifications dans NewProductForm.jsx. Au lieu de la ligne :

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Nous aurons celle-ci, dans laquelle nous transmettrons simplement les données nécessaires par des virgules (n'oubliez pas dans ce fichier de retirer nanoid de l'import) :

dispatch(productAdded(name, desc, price, amount))

Lançons l'application, puis créons un nouveau produit et assurons-nous que nous n'avons rien cassé.

Ouvrez votre application avec les étudiants. Dans le fichier StudentsSlice.js, réécrivez votre réducteur studentAdded de manière à ce qu'il soit sous la forme de l'objet {reducer, prepare}, comme montré dans la leçon.

Apportez les modifications correspondantes dans le fichier NewStudentForm.jsx, comme montré dans la leçon. Lancez l'application et assurez-vous que tout fonctionne comme avant.