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:

routes/root.jsximport { 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:

routes/root.jsxexport async function action() {
  const product = await createProduct();
  return { product };
}

Vamos abrir o main.jsx e importar a action:

main.jsximport 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:

main.jsxconst 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.