React Router တွင် action method ဖြင့် ဒေတာများထည့်သွင်းခြင်း

ဤသင်ခန်းစာတွင် လမ်းကြောင်းအရာဝတ္ထု၏ action method ကို မိတ်ဆက်ပေးပါမည်။ သင့်အက်ပ်က သင့်လမ်းကြောင်းထံ POST, PUT, PATCH သို့မဟုတ် DELETE (GET မှလွဲ၍) HTTP request ကို ပေးပို့တိုင်း ဤ method ကို ခေါ်ဆိုပါသည်။

စတင်ရန်၊ ကျွန်ုပ်တို့ ယခင်သင်ခန်းစာတွင် ရေးသားခဲ့သော ထုတ်ကုန်ဖန်တီးမှုလုပ်ဆောင်ချက်ကို ကျွန်ုပ်တို့၏ root.jsx သို့ import လုပ်ပါမည်။

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

ယခု ကျွန်ုပ်တို့သည် action function တစ်ခုကို ဖန်တီးရန် လိုအပ်ပါသည်။ ထုတ်ကုန်ထည့်ရန် ခလုတ်ကို နှိပ်လိုက်သောအခါ React Router က ခေါ်ဆိုမည်ဖြစ်ပြီး၊ ၎င်းကို loader function ၏ နောက်တွင် ထားရှိပါမည်။

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

ယခု main.jsx ကို ဖွင့်ပြီး action ကို import လုပ်ကြည့်ပါ။

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

ထို့နောက် လမ်းကြောင်းအရာဝတ္ထု၏ action method ၏တန်ဖိုးအဖြစ် ၎င်းကို သတ်မှတ်ပါမည်။ Form component သည် ခလုတ်နှိပ်သောအခါ browser က server သို့ request များ ပေးပို့ခြင်းမှ ကာကွယ်ပေးပြီး ကျွန်ုပ်တို့၏လမ်းကြောင်း၏ action method ကို လှည့်ပါလိမ့်မည်။ React Router ဖြင့် client-side routing သည် ဤသို့စိတ်ဝင်စားဖွယ် အလုပ်လုပ်ပါသည်။

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

ကျွန်ုပ်တို့၏ အက်ပ်လီကေးရှင်းကို စတင်လိုက်ပါ။ ဒယ်ဗယ်လ်ပါဝါပန်းကန်ပြားပေါ်ရှိ 'အက်ပ်လီကေးရှင်း' (Chrome အတွက် Application) tab ကို ဖွင့်ပါ။ သိမ်းဆည်းမှုအမျိုးအစားများထဲမှ indexedDB ကို နှိပ်ပါ၊ ဤနေရာတွင် localforage ကို စိတ်ဝင်စားပါသည်။ ယခု ကျွန်ုပ်တို့၏ အက်ပ်ထဲတွင် ထုတ်ကုန်ထည့်သွင်းရန် ခလုတ်ကို နှိပ်ပြီး နှိပ်ပြီးနောက် localforage သိုလှောင်မှုကို ပြန်လည်စတင်ခြင်းဖြင့် keyvaluepairs အတွင်း products array ထဲသို့ မတူညီသော id များပါသည့် objects များ ထည့်သွင်းလာသည်ကို မြင်တွေ့ရပါမည်။ အောင်မြင်ပါပြီ!!! ဤဆိုလိုသည်မှာ ကျွန်ုပ်တို့၏ သိုလှောင်ရာတွင် မှတ်တမ်းများ ဖန်တီးနေပြီဖြစ်သည်! ကျွန်ုပ်တို့၏ အက်ပ်ထဲရှိ စာရင်းသည်လည်း ပြည့်စုံလာပါသည်။ အကြံပေးချက်- နောက်ပိုင်းတွင် Application အတွင်းရှိ 'Storage' tab ပေါ်ရှိ ဤစာမျက်နှာ၏ သိမ်းဆည်းထားသောဒေတာများကို ရှင်းလင်းရန် မမေ့ပါနှင့်။

ယခင်သင်ခန်းစာများအတွက် တာဝန်များတွင် သင်ဖန်တီးခဲ့သော အက်ပ်လီကေးရှင်းကို ယူပါ။ သင်ခန်းစာပါအကြောင်းအရာများကို အသုံးပြု၍ action function တစ်ခုကို ဖန်တီးပါ၊ အမြစ်လမ်းကြောင်း၏ object တွင် ၎င်း၏ action method အဖြစ် ထည့်သွင်းပါ။