Aggiunta di dati con il metodo action in React Router

In questa lezione faremo conoscenza con il metodo action dell'oggetto route. Questo metodo viene chiamato quando l'applicazione invia una richiesta HTTP di tipo POST, PUT, PATCH o DELETE (tranne GET) alla tua route.

Per iniziare, importiamo la funzione per creare un prodotto, che abbiamo scritto nella lezione precedente, nel nostro root.jsx:

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

Ora dobbiamo creare la funzione action, che React Router chiamerà al click sul pulsante di aggiunta prodotto, posizioniamola dopo la funzione loader:

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

Apriamo main.jsx e importiamo action:

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

E impostiamola come valore del metodo action per l'oggetto route. Il componente Form impedirà al browser di inviare richieste al server quando si preme il pulsante, ma si rivolgerà al metodo action della nostra route. Ecco come funziona in modo interessante il routing lato client con React Router:

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

Avviamo la nostra applicazione. Apriamo la scheda 'Applicazione' (Application per Chrome) nel pannello dello sviluppatore, tra i vari tipi di archivi clicchiamo su indexedDB, qui ci interessa localforage. Ora cliccando sul pulsante di aggiunta prodotti nella nostra applicazione e aggiornando l'archivio localforage dopo il click vediamo come in keyvaluepairs nell'array products vengano aggiunti oggetti con diversi id. Vittoria!!! Ciò significa che nel nostro archivio vengono create delle voci! Naturalmente anche l'elenco nella nostra applicazione si aggiorna. Suggerimento: non dimenticate di pulire poi i dati salvati di questa pagina nella scheda 'Storage' in Application.

Prendete l'applicazione creata da voi nei compiti delle lezioni precedenti. Utilizzando il materiale della lezione, create la funzione action, aggiungetela all'oggetto della route root come metodo action.