Tietojen lisääminen action-metodilla React Routerissa

Tällä oppitunnilla tutustumme reitin objektin action -metodiin. Tätä metodia kutsutaan, kun sovellus lähettää HTTP-pyynnön tyyppiä POST, PUT, PATCH tai DELETE (paitsi GET) reitillesi.

Aluksi tuomme tuotteen luomisfunktion, joka kirjoitimme edellisellä oppitunnilla, tiedostoomme root.jsx:

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

Nyt meidän on luotava action -funktio, jota React Router kutsuu kun tuotteen lisäämispainiketta klikataan, sijoita se loader-funktion jälkeen:

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

Avataan main.jsx ja tuodaan action:

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

Ja asetetaan se arvoksi action -metodille reittiobjektille. Form -komponentti estää selainta lähettämästä pyyntöjä palvelimelle painiketta painettaessa, vaan ottaa yhteyttä reittimme action -metodiin. Näin mielenkiintoisesti toimii asiakaspuolen reititys React Routerilla:

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

Käynnistetään sovelluksemme. Avataan välilehti 'Application' (Application Chrome) kehittäjän työkalupaneelissa, eri tallennustiloista klikataan indexedDB, tässä meitä kiinnostaa localforage. Nyt klikkaamalla tuotteiden lisäämispainiketta sovelluksessamme ja päivittämällä localforage-tallennustilaa klikkauksen jälkeen näemme, kuinka keyvaluepairs-taulukkoon products lisätään objekteja erilaisilla id -arvoilla. Voitto!!! Tämä tarkoittaa, että tallennustilaamme luodaan tietueita! Tietenkin lista sovelluksessamme myös täydentyy. Vihje: muista tyhjentää myöhemmin tallennetut tiedot tältä sivulta 'Storage' -välilehdellä Applicationissa.

Ota edellisten oppituntien tehtävissä luomasi sovellus. Hyödynnä oppitunnin materiaaleja, luo action -funktio, lisää se reitin juuriobjektiin action -metodiksi.