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 компоненти браузерга тугма босилганда серверга соров юборишга йўл қўймайди, балки бизнинг маршрутимизнинг 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 метода сифатида қўшинг.