Προσθήκη δεδομένων με τη μέθοδο action στο React Router

Σε αυτό το μάθημα θα γνωρίσουμε τη μέθοδο action του αντικειμένου δρομολόγησης. Αυτή η μέθοδος καλείται όταν η εφαρμογή στέλνει αίτημα HTTP τύπου POST, PUT, PATCH ή DELETE (εκτός από το GET) στη διαδρομή σας.

Για να ξεκινήσουμε, θα εισάγουμε τη λειτουργία για δημιουργία προϊόντος, που γράψαμε στο προηγούμενο μάθημα, στο root.jsx μας:

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

Τώρα πρέπει να δημιουργήσουμε μια συνάρτηση action, την οποία θα καλεί το React Router όταν γίνεται κλικ στο κουμπί προσθήκης προϊόντος. Ας την τοποθετήσουμε μετά τη συνάρτηση loader:

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

Ας ανοίξουμε το main.jsx και να εισάγουμε το action:

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

Και ας το ορίσουμε ως τιμή της μεθόδου action για το αντικείμενο δρομολόγησης. Το στοιχείο Form θα εμποδίσει το πρόγραμμα πλοήγησης να στέλνει αιτήματα στον διακομιστή κατά το πάτημα ενός κουμπιού, και αντίθετα θα απευθυνθεί στη μέθοδο action της διαδρομής μας. Έτσι λειτουργεί ενδιαφέρουσα η δρομολόγηση από την πλευρά του client με το React Router:

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

Ας εκκινήσουμε την εφαρμογή μας. Ας ανοίξουμε την καρτέλα 'Εφαρμογή' (Application για Chrome) στο πλαίσιο εργαλείων προγραμματιστή, μεταξύ των διαφορετικών τύπων αποθήκευσης, κάντε κλικ στο indexedDB, εδώ μας ενδιαφέρει το localforage. Τώρα, κάνοντας κλικ στο κουμπί προσθήκης προϊόντων στην εφαρμογή μας και ανανεώνοντας το localforage μετά το κλικ βλέπουμε πώς στο keyvaluepairs στον πίνακα products προστίθενται αντικείμενα με διαφορετικά id. Νίκη!!! Αυτό σημαίνει ότι στο σύστημα αποθήκευσής μας δημιουργούνται εγγραφές! Φυσικά και η λίστα στην εφαρμογή μας επίσης αναπληρώνεται. Συμβουλή: μην ξεχάσετε να καθαρίσετε αργότερα τα αποθηκευμένα δεδομένα αυτής της σελίδας στην καρτέλα 'Storage' στο Application.

Πάρτε την εφαρμογή που δημιουργήσατε στα αναθέσεις των προηγούμενων μαθημάτων. Χρησιμοποιώντας το υλικό του μαθήματος, δημιουργήστε μια συνάρτηση action, προσθέστε την στο αντικείμενο της κύριας διαδρομής ως μέθοδο action.