Formulários e Estados Locais no Redux

Nas lições anteriores, aprendemos a obter dados da store e exibi-los em um componente React. Nesta lição, vamos começar a adicionar novos dados. Faremos isso usando um formulário, que, ao ser preenchido, permitirá que o vendedor adicione um novo produto.

Vamos começar pelo fato de que nem sempre faz sentido usar o estado global do Redux. Há casos em que podemos criar estados locais para nossas necessidades. Chamaremos de estados locais aqueles que são usados dentro de um componente específico para necessidades técnicas. Por exemplo, para ocultar ou mostrar algo com um botão.

No nosso caso, o usuário irá inserir dados em um formulário e, naturalmente, precisaremos de estados para isso. Poderíamos usar o estado global do Redux, mas não há necessidade, pois nossos estados funcionarão apenas em um lugar do aplicativo: o formulário de adição de produto. A regra principal a ser seguida é: os estados locais não podem operar fora do componente em que foram criados e, em hipótese alguma, devem interferir na store. Essa prática é comumente usada na criação de formulários.

Vamos abrir a pasta products do nosso aplicativo de produtos, criar nela um arquivo NewProductForm.jsx e importar o Hook useState:

import { useState } from 'react'

Agora, vamos criar o componente do formulário e definir nele os estados comuns, como fazíamos anteriormente no React. Precisamos de estados para trabalhar com o nome, descrição, preço e quantidade do produto:

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

Em seguida, adicionaremos o tratamento padrão para cada campo quando o usuário inserir os dados:

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)

E então, retornaremos no componente a estrutura com um título e um formulário vazio:

return (
	<div>
		<h2>Adicionar um Novo Produto</h2>
		<form>
		</form>
	</div>
)

Abra seu aplicativo de estudantes. Crie um arquivo NewStudentForm.jsx na pasta students. Defina no componente NewStudentForm estados locais para os campos necessários, escreva o tratamento para cada campo, conforme mostrado na lição.

Retorne no componente NewStudentForm a estrutura contendo um título e um formulário vazio.