Деректерді React Router-дегі action әдісімен қосу

Бұл сабақта біз маршрут объектісінің 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 компоненті түймені басқан кезде браузерге серверге сұраныс жіберуге жол бермейді, bun орнына біздің маршрутымыздың action әдісіне жүгінеді. React Router-мен клиент жағындағы маршруттау осылай қызықты жұмыс істейді:

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

Қолданбамызды іске қосайық. Әзірлеуші панеліндегі 'Қолданба' (Chrome үшін Application) қойындысын ашайық, әртүрлі сақтау орындарының арасынан indexedDB-ді таңдап, localforage-ге басамыз. Енді қолданбамыздағы өнімді қосу түймесін басып, содан кейін localforage сақтау орнын жаңартқанда, біз products массивіне әртүрлі id бар объектілер қосылатынын көреміз. Жеңіс!!! Бұл біздің сақтау орнымызда жазулар құрылатынын білдіреді! Әрине, біздің қолданбамыздағы тізім де толықтайды. Ескерту: кейін осы беттің сақталған деректерін Application қойындысындағы 'Storage' қойындысынан тазалауды ұмытпаңыз.

Алдыңғы сабақтардың тапсырмаларында жасаған қолданбаңызды алыңыз. Сабақ материалын пайдаланып, action функциясын құрыңыз, оны түбір маршрутының объектісіне action әдісі ретінде қосыңыз.