Adición de datos con el método action en React Router

En esta lección nos familiarizaremos con el método action del objeto de ruta. Este método se llama cuando la aplicación envía una solicitud HTTP de tipo POST, PUT, PATCH o DELETE (excepto GET) a tu ruta.

Para empezar importemos la función para crear producto, que escribimos en la lección anterior a nuestro root.jsx:

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

Ahora necesitamos crear una función action, que llamará React Router al hacer clic en el botón de agregar producto, la colocaremos después de la función loader:

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

Abramos main.jsx e importemos action:

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

Y la establecemos como valor del método action para el objeto de ruta. El componente Form evitará que el navegador envíe solicitudes al servidor al presionar el botón, y en su lugar se dirigirá al método action de nuestra ruta. Así es como funciona de manera interesante el enrutamiento del lado del cliente con React Router:

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

Ejecutemos nuestra aplicación. Abramos la pestaña 'Aplicación' (Application para Chrome) en el panel de desarrollador, entre los diferentes tipos de almacenamientos hagamos clic en indexedDB, aquí nos interesa localforage. Ahora haciendo clic en el botón de agregar productos en nuestra aplicación y actualizando el almacenamiento localforage después del clic vemos cómo en keyvaluepairs en el array products se agregan objetos con diferentes id. ¡¡¡Victoria!!! Esto significa que en el almacenamiento se crean registros. Por supuesto la lista en nuestra aplicación también se actualiza. Pista: no olviden limpiar después los datos guardados de esta página en la pestaña 'Storage' en Application.

Tome la aplicación creada por usted en las tareas de lecciones anteriores. Usando los materiales de la lección, cree una función action, agréguela al objeto de la ruta raíz como método action.