Kuongeza Data kwa Kutumia Action Method katika React Router

Katika somo hili tutafahamiana na method action ya object ya route. Method hii huitwa wakati programu inapotuma HTTP request ya aina POST, PUT, PATCH au DELETE (isipokuwa GET) kwenye route yako.

Kwanza tuimport function ya kuunda bidhaa ambayo tuliandika katika somo iliyopita kwenye root.jsx:

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

Sasa tunahitaji kuunda function action, ambayo React Router itaita wakati kifungo cha kuongeza bidhaa kinapobonyezwa, tuweke baada ya function loader:

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

Wacha tufungue main.jsx na tuimport action:

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

Na tuiweke kama thamani ya method action kwa object ya route. Component Form haitaacha browser kutuma requests kwa server wakati kifungo kinapobonyezwa, bali itaelekea kwenye method action ya route yetu. Hivi ndivyo routing upande wa client inavyofanya kazi kwa kuvutia na React Router:

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

Wacha tuwasha programu yetu. Wacha tufungue kichupo 'Programu' (Application kwa Chrome) kwenye paneli ya wasanidi programu, miongoni mwa aina mbalimbali za vihifadhi bofya kwenye indexedDB, hapa tunavutiwa na localforage. Sasa ukibonyeza kwenye kifungo cha kuongeza bidhaa kwenye programu yetu na ukifanyisha upya kihifadhi cha localforage baada ya kubonyeza tunaona jinsi katika keyvaluepairs kwenye array products vitu vilivyo na id tofauti vinavyoongezwa. Ushindi!!! Hii inamaanisha kuwa kwenye kihifadhi chetu rekodi zinaundwa! Bila shaka orodha kwenye programu yetu pia inajazwa. Kidokezo: usisahau kusafisha baadaye data iliyohifadhiwa ya ukurasa huu kwenye kichupo 'Storage' katika Application.

Chukua programu uliyoiumba katika kazi za masomo yaliyopita. Kwa kutumia nyenzo za somo, unda function action, uionge kwenye object ya mizizi ya route kama method action.