Ajout de données avec la méthode action dans React Router

Dans cette leçon, nous allons nous familiariser avec la méthode action de l'objet de route. Cette méthode est appelée lorsque l'application envoie une requête HTTP de type POST, PUT, PATCH ou DELETE (sauf GET) à votre route.

Pour commencer, importons la fonction pour créer un produit, que nous avons écrite dans la leçon précédente, dans notre root.jsx :

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

Maintenant, nous devons créer une fonction action, que React Router appellera lorsqu'on cliquera sur le bouton d'ajout de produit, plaçons-la après la fonction loader :

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

Ouvrons main.jsx et importons l'action :

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

Et définissons-la comme valeur de la méthode action pour l'objet de route. Le composant Form empêchera le navigateur d'envoyer des requêtes au serveur lors du clic sur le bouton, et appellera plutôt la méthode action de notre route. C'est ainsi que fonctionne intéressamment le routage côté client avec React Router :

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

Lançons notre application. Ouvrons l'onglet 'Application' (Application pour Chrome) dans le panneau de développement, parmi les différents types de stockage, cliquons sur indexedDB, ici nous nous intéressons à localforage. Maintenant, en cliquant sur le bouton d'ajout de produits dans notre application et en actualisant le stockage localforage après un clic, nous voyons comment dans keyvaluepairs, dans le tableau products, des objets avec différents id sont ajoutés. Victoire !!! Cela signifie que des enregistrements sont créés dans notre stockage ! Bien sûr, la liste dans notre application s'enrichit également. Astuce : n'oubliez pas de nettoyer ensuite les données sauvegardées de cette page dans l'onglet 'Storage' dans Application.

Prenez l'application que vous avez créée dans les exercices des leçons précédentes. En utilisant le matériel de la leçon, créez la fonction action, ajoutez-la à l'objet de la route racine en tant que méthode action.