Dodawanie danych za pomocą metody action w React Router

W tej lekcji zapoznamy się z metodą action obiektu trasy. Ta metoda jest wywoływana, gdy aplikacja wysyła żądanie HTTP typu POST, PUT, PATCH lub DELETE (oprócz GET) do Twojej trasy.

Na początek zaimportujmy funkcję do tworzenia produktu, którą napisaliśmy w poprzedniej lekcji do naszego root.jsx:

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

Teraz musimy utworzyć funkcję action, która będzie wywoływana przez React Router po kliknięciu przycisku dodawania produktu, umieścimy ją po funkcji loader:

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

Otwórzmy main.jsx i zaimportujmy action:

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

I ustawmy ją jako wartość metody action dla obiektu trasy. Komponent Form nie pozwoli przeglądarce wysyłać żądań do serwera po naciśnięciu przycisku, a zwróci się do metody action naszej trasy. Tak ciekawie działa routing po stronie klienta z React Router:

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

Uruchommy naszą aplikację. Otwórzmy zakładkę 'Aplikacja' (Application dla Chrome) w panelu deweloperskim, spośród różnych typów pamięci kliknijmy na indexedDB, tutaj interesuje nas localforage. Teraz klikając na przycisk dodawania produktów w naszej aplikacji i odświeżając pamięć localforage po kliknięciu widzimy, jak w keyvaluepairs w tablicy products dodawane są obiekty z różnymi id. Zwycięstwo!!! To znaczy, że w pamięci tworzone są rekordy! Oczywiście lista w naszej aplikacji również się powiększa. Podpowiedź: nie zapomnij później wyczyścić zapisanych danych tej stronki w zakładce 'Storage' w Application.

Weź aplikację utworzoną przez Ciebie w zadaniach do poprzednich lekcji. Korzystając z materiałów lekcji, utwórz funkcję action, dodaj ją do obiektu trasy głównej jako metodę action.