Página de edição de produto no navegador no Redux
Na lição anterior, criamos um formulário para edição de produto. Vamos adicionar uma rota para ele.
Abra nossa aplicação de produtos,
e nela o arquivo App.jsx e adicione mais
um objeto de rota filha no
array para a propriedade children (não
se esqueça de importar EditProductForm):
{
path: '/editProduct/:productId',
element: <EditProductForm />,
},
Também, para navegar até o formulário de edição
precisamos criar um link. Para isso, abra
ProductPage.jsx e coloque este link no
JSX retornado, após o último parágrafo
com a quantidade do produto e antes da div de fechamento:
<Link to={`/editProduct/${product.id}`} className="link-btn">
editar
</Link>
Também importe Link da biblioteca do roteador:
import { Link } from 'react-router-dom'
Inicie nossa aplicação e clique no botão
de visualização de algum produto. Tente
editá-lo e volte para a lista
de produtos, clicando no link
'Products' no menu à esquerda. Também no Redux
DevTools você pode ver uma nova action
productUpdated e ver as mudanças
do objeto do produto na store.
Abra sua aplicação de estudantes.
No arquivo App.jsx adicione mais uma rota filha
para edição dos dados de um estudante.
Adicione um elemento Link no JSX
da página do estudante para navegar para
a página de edição de seus dados.
Inicie sua aplicação, tente editar os dados de algum estudante. Observe a barra de endereços do navegador quando você estiver na página de edição. Veja as mudanças no Redux DevTools do navegador.
