Modificación de datos de productos en Redux store

Aprendimos a agregar productos, pero ¿qué pasaría si quisiéramos modificar la información del producto? Veamos cómo hacerlo en esta y en las siguientes lecciones.

Abramos nuestra aplicación de productos y accedamos al archivo productsSlice.js. Comencemos por lo que necesitamos para el slice products escribir otro reducer, que se ejecutará al actualizar un producto. Llamémoslo productUpdated y agreguémoslo en el campo reducers después del reducer productAdded. También pasémosle inmediatamente como parámetros state y action, en base a los cuales, como recordamos, funciona el reducer:

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

Ahora pensemos, qué datos necesitaremos para actualizar el producto. Antes que nada - es el id, por él podremos encontrar el producto que nos interesa en el store. El resto de datos - nombre, descripción, precio y cantidad serán los que cambiaremos. Todos estos valores los obtendremos de la propiedad payload del objeto action, que nos llegará, y, si lo escribiéramos manual, se vería así, como se muestra a continuación. Note que el valor esperado de la propiedad payload - es un argumento, por lo tanto vamos a pasar aquí un objeto (hablaremos de esto más adelante):

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

Habiendo aclarado los puntos principales, ahora podemos escribir entre las llaves el código para productUpdated. Primero obtengamos del objeto action los datos modificados:

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

Ahora encontraremos por el id obtenido el producto que necesita ser modificado:

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

Si se encontró tal producto en el store, entonces reemplazaremos sus datos con los nuevos valores:

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
	}
},

Solo nos queda exportar el action creator para usar en el componente, que amablemente creará por nosotros createSlice. Agreguémoslo a la exportación al final del archivo, junto con el existente productAdded:

export const { productAdded, productUpdated } = productsSlice.actions

Abra su aplicación de estudiantes. Habiendo estudiado el material de la lección, en el archivo studentsSlice.js escriba otro reducer para productsSlice, que actualizará los datos del estudiante en el store en caso de que sean modificados por el usuario. Llámelo studentUpdated.

¿Y cómo se vería en este caso su objeto action? Envíe su código en la respuesta.

Al final del archivo exporte el action creator obtenido studentUpdated.