Atualizando dados com FormData no React Router

Temos uma função updateProduct para atualizar os dados do produto no armazenamento. Agora, vamos passar para os dados do nosso formulário de edição.

Ao enviar um formulário HTML, o navegador cria um objeto FormData com os dados e os envia no corpo da requisição para o servidor. Além disso, o valor de cada input é extraído para o objeto a partir do atributo name (é por isso que precisávamos deles no formulário, lembra?). Nós agora sabemos que o React Router envia as requisições não para o servidor, mas para o método action da nossa rota, consequentemente, o FormData chegará lá. Vamos trabalhar com isso.

Para começar, vamos abrir nosso arquivo edit.jsx e importar updateProduct:

import { updateProduct } from '../forStorage';

Em seguida, vamos escrever a função para o action do objeto de rota, como fizemos antes. Vamos adicioná-la logo após a função loader. Iremos passar nosso request e os parâmetros da URL para ela:

export async function action({ request, params }) {}

Do request, obteremos o FormData, depois extrairemos os dados dele na forma de um objeto contendo pares chave: valor e usaremos o updateProduct para enviar esses dados para o armazenamento:

export async function action({ request, params }) {
	const formData = await request.formData();
	const updates = Object.fromEntries(formData);
	await updateProduct(params.productId, updates);
	return 1;
}

Agora só falta ir até o main.jsx e adicionar a função action ao objeto de rota de edição. Vamos importar action:

import EditProduct, {
	loader as editProductLoader,
	action as editAction,
} from './routes/edit';

E adicioná-lo ao objeto de rota de edição:

{
	path: 'products/:productId/edit',
	element: <EditProduct />,
	loader: editProductLoader,
	action: editAction,
},

Agora execute a aplicação, adicione alguns produtos à lista, depois clique sobre eles, preencha o formulário e clique no botão salvar. Não se esqueça de acessar o painel do desenvolvedor na seção localforage e atualizar o armazenamento. Agora, na seção keyvaluespairs, podemos ver os objetos no array products com os nossos dados inseridos.

Pegue a aplicação que você criou nas tarefas da lição anterior. Usando os materiais da lição, crie a função action para a rota de edição de dados do estudante, adicione-a ao objeto de rota de edição. Abra o painel do desenvolvedor e certifique-se de que, após as alterações, os dados atualizados realmente são exibidos na aba localforage.