Formulario para editar datos en Redux

Ahora tenemos un reductor para cambiar datos en el store. En esta lección crearemos un formulario con el cual podremos editar los datos del producto.

Abramos nuestra aplicación de productos y creemos en la carpeta products el archivo EditProductForm.jsx. La creación del componente EditProductForm será análoga a NewProductForm, con la excepción de algunas diferencias en las que nos detendremos. Por lo tanto, copie completamente el código de NewProductForm.jsx y péguelo en el archivo creado EditProductForm.jsx. Ahora comencemos en orden.

Elimine de la importación nanoid, aquí no necesitamos generar id. Reemplace la importación productAdded por productUpdated, porque aquí usaremos la action para actualizar, y no para agregar producto.

A continuación, cambiaremos el nombre de la función de nuestro componente de NewProductForm a EditProductForm.

Antes de que establezcamos los estados locales en la función EditProductForm para name, desc, price y amount, insertemos unas cuantas líneas de código más. Como mencionamos anteriormente, aquí no necesitamos generar id. Ahora nuestra tarea es obtenerlo de los datos del producto a modificar. Ya hemos hecho esto al crear una página separada para el producto. Entonces, obtengamos el id usando el hook useParams, y luego encontremos el producto que necesitamos, usando el hook useSelector (no olvide importar ambos hooks al principio del archivo):

let params = useParams()
const { productId } = params

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

Después de esto, cambiaremos el bloque con la declaración de los estados locales. Ahora necesitamos establecer como valor inicial los datos del producto obtenidos del store. Así se verá el primer estado, modifique los tres restantes usted mismo:

const [name, setName] = useState(product.name)

Después de asignar la variable para useDispatch agreguemos una línea más de código esta vez para el hook useNavigate. Lo usaremos para regresar a la página del producto cuando el usuario guarde los cambios realizados en el formulario:

const navigate = useNavigate()

También importe este hook al principio del archivo:

import { useNavigate, useParams } from 'react-router-dom'

A continuación tenemos los manejadores para los campos de entrada. Y después de ellos necesitamos ajustar la función onSaveProductClick. Ahora en ella, al hacer clic, enviaremos la acción productUpdated con el id obtenido y los datos modificados en forma de objeto. Después agregaremos nuestro navigate, para transitar a la página del producto modificado:

const onSaveProductClick = () => {
	if (name && desc && price && amount) {
		dispatch(
			productUpdated({
				id: productId,
				name,
				desc,
				price,
				amount,
			})
		);
		
		navigate(`/products/${productId}`);
	}
}

Solo queda en nuestro retorno de marcado encontrar la línea:

<h2>Add a New Product</h2>

Y reemplazarla por:

<h2>Edit Product</h2>

Abra su aplicación de estudiantes. Cree el archivo EditStudentForm.jsx por analogía con NewStudentForm.jsx. Introduzca en él los cambios, como se muestra en la lección.