Action method-ро бо роҳи React Router илова кардани маълумот

Дар ин дарс мо бо method-и action-и route-объект шинос мешавем. Ин method он вақт даъват карда мешавад, ки барнома як HTTP дархост аз навъи POST, PUT, PATCH ё DELETE (ба ғайр аз GET) ба route-и шумо мефиристад.

Барои оғоз, функсияи эҷоди маҳсулотро, ки мо дар дарси гузашта навишта будем, ба 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';

Ва онро ҳамчун қимати method-и action барои route-объект таъин кунем. Компоненти Form ба браузер имкон намедиҳад, ки дархостҳоро ба сервер дар вақти пахш кардани тугма бифиристад, балки ба method-и action-и route-и мо муроҷиат мекунад. Маршрутизатсия дар тарафи клиент бо 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-ро эҷод кунед, онро ба объекти route-и решагӣ ҳамчун method-и action илова намоед.