Adicionando dados com o método action no React Router

Nesta lição, vamos nos familiarizar com o método action do objeto de rota. Este método é chamado quando o aplicativo envia uma solicitação HTTP do tipo POST, PUT, PATCH ou DELETE (exceto GET) para sua rota.

Para começar, vamos importar a função para criar um produto, que escrevemos na lição anterior, para o nosso root.jsx:

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

Agora precisamos criar uma função action, que será chamada pelo React Router quando clicarmos no botão de adicionar produto, vamos colocá-la após a função loader:

export async function action() {
	const product = await createProduct();
	return { product };
}

Vamos abrir o main.jsx e importar a action:

import Root, {
	loader as rootLoader,
	action as rootAction
} from './routes/root';

E defini-la como o valor do método action para o objeto de rota. O componente Form impedirá que o navegador envie solicitações para o servidor ao clicar no botão, e instead se voltará para o método action da nossa rota. É assim que funciona de forma interessante a roteirização do lado do cliente com React Router:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
		loader: rootLoader,
		action: rootAction,
		children: [
			{
				path: 'products/:productId',
				element: <Product />,
			},
		],
	},
	
]);

Vamos executar nosso aplicativo. Abra a guia 'Aplicativo' (Application para o Chrome) no painel do desenvolvedor, entre os diferentes tipos de armazenamentos, clique em indexedDB, aqui estamos interessados no localforage. Agora, clicando no botão de adicionar produtos em nosso aplicativo e atualizando o armazenamento localforage após o clique, vemos como no keyvaluepairs no array products são adicionados objetos com diferentes id. Vitória!!! Isso significa que estão sendo criados registros em nosso armazenamento! É claro que a lista em nosso aplicativo também é preenchida. Dica: não se esqueça de limpar depois os dados salvos desta página na guia 'Storage' em Application.

Pegue o aplicativo criado por você nas tarefas das lições anteriores. Usando os materiais da lição, crie uma função action, adicione-a ao objeto da rota raiz como o método action.