Formularios y estados locales en Redux

En lecciones anteriores, aprendimos a obtener datos del store y mostrarlos en un componente React. En esta lección, comenzaremos a agregar nuevos datos. Lo haremos usando un formulario, al completarlo, el vendedor podrá agregar un nuevo producto.

Comencemos por el hecho de que no siempre tiene sentido usar el estado global de Redux. Hay casos en los que para nuestras necesidades podemos crear estados locales. Llamaremos estados locales a aquellos estados que se utilizan dentro de un componente específico para necesidades técnicas. Por ejemplo, para ocultar o mostrar algo mediante un botón.

En nuestro caso, el usuario ingresará datos en el formulario y, naturalmente, necesitaremos estados para esto. Podríamos usar el estado global de Redux, pero no tiene sentido, ya que nuestros estados funcionarán solo en un lugar de la aplicación: el formulario de agregar producto. La regla principal que debemos seguir es que los estados locales no deben funcionar fuera de los límites del componente en el que se crearon, y de ninguna manera deben tocar el store. Esta práctica se usa a menudo al crear formularios.

Abramos la carpeta products de nuestra aplicación con productos, creemos en ella el archivo NewProductForm.jsx e importemos en él el hook useState:

import { useState } from 'react'

Ahora creemos el componente mismo con el formulario y escribamos en él estados ordinarios, como lo hacíamos antes en React. Necesitamos estados para trabajar con el nombre, la descripción, el precio y la cantidad del producto:

export const NewProductForm = () => {
	const [name, setName] = useState('')
	const [desc, setDesc] = useState('')
	const [price, setPrice] = useState(0)
	const [amount, setAmount] = useState(0)
}

A continuación, agreguemos el procesamiento estándar para cada campo cuando el usuario ingrese datos:

const onNameChanged = (e) => setName(e.target.value)
const onDescChanged = (e) => setDesc(e.target.value)
const onPriceChanged = (e) => setPrice(e.target.value)
const onAmountChanged = (e) => setAmount(e.target.value)

Y luego retornemos en el componente el maquetado con el título y un formulario vacío:

return (
	<div>
		<h2>Agregar un Nuevo Producto</h2>
		<form>
		</form>
	</div>
)

Abra su aplicación de estudiantes. Cree el archivo NewStudentForm.jsx en la carpeta students. Cree en el componente NewStudentForm estados locales para los campos que necesite, escriba para cada campo el procesamiento, como se muestra en la lección.

Retorne en el componente NewStudentForm el maquetado que contenga el título y un formulario vacío.