Datu pievienošana ar action metodi React Router

Šajā nodarbībā mēs iepazīsimies ar maršruta objekta metodi action. Šī metode tiek izsaukta, kad lietotne sūta HTTP pieprasījumu tipa POST, PUT, PATCH vai DELETE (izņemot GET) jūsu maršrutam.

Vispurs importēsim produktu izveides funkciju, ko mēs uzrakstījām iepriekšējā nodarbībā, mūsu root.jsx failā:

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

Tagad mums ir jāizveido action funkcija, ko izsauks React Router, noklikšķinot uz pievienošanas pogas, ievietosim to aiz loader funkcijas:

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

Atveram main.jsx failu un importējam action:

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

Un iestatām to kā vērtību metodei action maršruta objektam. Komponents Form neļaus pārlūkprogrammai sūtīt pieprasījumus uz serveri, nospiežot pogu, bet vērsīsies pie action metodes mūsu maršrutā. Tā interesanti strādā klienta pušu maršrutēšana ar React Router:

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

Palaidīsim mūsu lietotni. Atveram cilni 'Lietotne' (Application priekš Chrome) izstrādātāju panelī, starp dažādiem krātuves veidiem noklikšķinām uz indexedDB, šeit mūs interesē localforage. Tagad, noklikšķinot uz pievienošanas pogas mūsu lietotnē un atsvaidzinot localforage krātuvi pēc klikšķa, mēs redzam, kā keyvaluepairs masīvā products tiek pievienoti objekti ar dažādiem id. Uzvara!!! Tas nozīmē, ka mūsu krātuvē tiek izveidoti ieraksti! Protams, saraksts mūsu lietotnē arī tiek papildināts. Padoms: neaizmirstiet pēc tam notīrīt saglabātos datus šajā lapas cilnē 'Krātuve' sadaļā Lietotne.

Paņemiet lietotni, ko izveidojāt uzdevumos iepriekšējām nodarbībām. Izmantojot nodarbības materiālus, izveidojiet action funkciju, pievienojiet to saknes maršruta objektam kā action metodi.