Formulário para Editar Dados no Redux

Agora temos um redutor para alterar dados na store. Nesta lição, criaremos um formulário com o qual poderemos editar os dados de um produto.

Vamos abrir nossa aplicação de produtos e criar na pasta products o arquivo EditProductForm.jsx. A criação do componente EditProductForm será análoga ao NewProductForm, com exceção de algumas diferenças, nas quais vamos nos concentrar. Portanto, copie todo o código do NewProductForm.jsx e cole-o no arquivo criado EditProductForm.jsx. Agora vamos começar passo a passo.

Remova a importação do nanoid, aqui não precisamos gerar um id. Substitua a importação productAdded por productUpdated, porque aqui usaremos a action para atualizar, e não para adicionar um produto.

Em seguida, vamos mudar o nome da função do nosso componente de NewProductForm para EditProductForm.

Antes de configurarmos os estados locais na função EditProductForm para name, desc, price e amount, vamos inserir mais algumas linhas de código. Como mencionamos anteriormente, aqui não precisamos gerar um id. Agora nossa tarefa é obtê-lo a partir dos dados do produto a ser modificado. Já fizemos isso ao criar a página individual para o produto. Então, vamos obter o id usando o hook useParams, e então encontrar o produto de que precisamos, usando o hook useSelector (não se esqueça de importar ambos os hooks no início do arquivo):

products/EditProductForm.jsxlet params = useParams()
const { productId } = params

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

Depois disso, vamos alterar o bloco de declaração dos estados locais. Agora precisamos definir como valor inicial os dados do produto obtidos da store. Assim ficará o primeiro estado, refaça os três restantes você mesmo:

products/EditProductForm.jsxconst [name, setName] = useState(product.name)

Após atribuir a variável para useDispatch vamos adicionar mais uma linha de código desta vez para o hook useNavigate. Vamos usá-lo para retornar à página do produto quando o usuário salvar as alterações feitas no formulário:

products/EditProductForm.jsxconst navigate = useNavigate()

Também importe este hook no início do arquivo:

products/EditProductForm.jsximport { useNavigate, useParams } from 'react-router-dom'

Em seguida, temos os manipuladores para os campos de entrada. E depois deles, precisamos ajustar a função onSaveProductClick. Agora nela, ao clicar, vamos despachar a action productUpdated com o id obtido e os dados alterados na forma de um objeto. Depois, adicionaremos nosso navigate, para navegar até a página do produto alterado:

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

Resta apenas, em nossa marcação de retorno, encontrar a linha:

products/EditProductForm.jsx<h2>Add a New Product</h2>

E substituí-la por:

products/EditProductForm.jsx<h2>Edit Product</h2>