Modification des données du produit dans le Redux store

Nous avons appris à ajouter des produits, mais que se passe-t-il si nous souhaitons modifier les informations sur un produit ? Examinons comment procéder dans cette leçon et les suivantes.

Ouvrons notre application de produits et allons dans le fichier productsSlice.js. Commençons par le fait que nous devons, pour le slice products, écrire un autre reducer, qui sera déclenché lors de la mise à jour d'un produit. Appelons-le productUpdated et ajoutons-le dans le champ reducers après le reducer productAdded. Passons-lui immédiatement en paramètres state et action, sur la base desquels, comme nous nous en souvenons, fonctionne le reducer :

reducers: {
	productAdded(state, action) {
		state.push(action.payload)
	},
	productUpdated(state, action) {},
},

Maintenant, réfléchissons aux données dont nous aurons besoin pour mettre à jour le produit. Tout d'abord - c'est l'id, grâce à lui nous pourrons trouver le produit qui nous intéresse dans le store. Les autres données - nom, description, prix et quantité seront celles à modifier. Toutes ces valeurs nous les obtiendrons depuis la propriété payload de l'objet action, qui nous parviendra, et, si nous l'écrivions manuellement, il ressemblerait à ce qui est montré ci-dessous. Notez que la valeur attendue de la propriété payload est un seul argument, donc nous transmettrons ici un objet (nous en parlerons ultérieurement) :

{
	type: 'products/productUpdated',
	payload: {id, name, desc, price, amount}
}

Ayant clarifié les points principaux, nous pouvons maintenant écrire entre les accolades le code pour productUpdated. Commençons par obtenir depuis l'objet action les données modifiées :

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
},

Maintenant, nous trouverons par l'id obtenu le produit qui doit être modifié :

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
},

Si un tel produit est trouvé dans le store, nous remplacerons ses données par les nouvelles valeurs :

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
	if (desiredProduct) {
		desiredProduct.name = name
		desiredProduct.desc = desc
		desiredProduct.price = price
		desiredProduct.amount = amount
	}
},

Il ne nous reste plus qu'à exporter l'action creator pour l'utiliser dans le composant, que createSlice créera aimablement pour nous. Ajoutons-le à l'export à la fin du fichier, aux côtés de l'existant productAdded :

export const { productAdded, productUpdated } = productsSlice.actions

Ouvrez votre application avec les étudiants. Après avoir étudié le matériel de la leçon, dans le fichier studentsSlice.js, ajoutez un autre reducer pour productsSlice, qui mettra à jour les données de l'étudiant dans le store en cas de modification par l'utilisateur. Nommez-le studentUpdated.

Et dans ce cas, à quoi ressemblerait votre objet action ? Envoyez son code dans la réponse.

À la fin du fichier, exportez l'action creator obtenu studentUpdated.