React Routerде action методу менен маалымат кошуу

Бул сабакта биз маршрут объектисинин action методу менен таанышабыз. Бул метод сиздин маршрутуңузга колдонмо POST, PUT, PATCH же DELETE тибиндеги HTTP сурам жибергенде (GET эмес) чакырылат.

Баштоо үчүн, биз мурунку сабакта жазып алган продукт түзүү функциясын root.jsx файлыбызга импорттойлу:

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

Эми бизге React Router продукт кошуу баскычын басканда чакыра турган action функциясын түзүшүбүз керек, аны 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ди чыкылдаңыз, бул жерде bизди localforage кызыктырат. Эми колдонмобуздо продукт кошуу баскычын чыкылдап, ар бир чыкылдагандан кийин localforage сактоочусун жаңыртып турсак, keyvaluepairs массивиндеги products массивине ар кандай id менен объекттер кошуларын көрөбүз. Жеңиш!!! Бул биздин сактоочу жерде жазуулар түзүлөт дегенди билдирет! Албетте, биздин колдонмодогу тизме да толушат. Эскертүү: кийинчерээк Application кошумчасындагы 'Storage' бөлүмүндөгү бул баракчанын сакталган маалыматтарын тазалап коюңуз.

Мурунку сабактардын тапшырмаларында сиз түзгөн колдонмонузду алыңыз. Сабактын материалдарын пайдаланып, action функциясын түзүңүз, аны негизги маршрут объектисине action методу катары кошуңуз.