React Router හි action ක්‍රමය සමඟ දත්ත එකතු කිරීම

මෙම පාඩමේදී අපි මාර්ගයේ වස්තුවේ action ක්‍රමය හඳුනා ගනිමු. යෙදුම ඔබේ මාර්ගයට POST, PUT, PATCH හෝ DELETE (GET හැර) වර්ගයේ HTTP අයදුම්පතක් යවන විට මෙම ක්‍රමය කැඳවනු ලැබේ.

ආරම්භ කිරීම සඳහා, අපි කලින් පාඩමේදී ලියූ නිෂ්පාදනය නිර්මාණය කිරීමේ ශ්‍රිතය අපේ root.jsx වෙත ආයාත කරමු:

routes/root.jsximport { createProduct } from '../forStorage';

දැන් අපට action ශ්‍රිතයක් නිර්මාණය කිරීමට අවශ්‍ය වන අතර, එය නිෂ්පාදන එකතු කිරීමේ බොත්තම ක්ලික් කිරීමේදී React Router විසින් කැඳවනු ඇත. එය loader ශ්‍රිතයෙන් පසුව තබමු:

routes/root.jsxexport async function action() {
  const product = await createProduct();
  return { product };
}

දැන් අපි main.jsx විවෘත කර action ආයාත කරමු:

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

එය මාර්ග වස්තුව සඳහා action ක්‍රමයේ අගය ලෙස සකසමු. Form සංරචකය බ්‍රව්සරයට බොත්තම ඔබොත් කරන විට සේවාදායකය වෙත අයදුම්පත් යැවීමට ඉඩ නොදෙන අතර, අපේ මාර්ගයේ action ක්‍රමය වෙත පිවිසෙයි. React Router සමඟ පාර්ශ්වීය මාර්ගගත කිරීම මෙලෙස සිත්ගන්නා සුළුව ක්‍රියා කරයි:

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

අපගේ යෙදුම ආරම්භ කරමු. දෘශ්‍යකරණය කිරීමේ පැනලයේ 'යෙදුම' (Chrome සඳහා Application) ටැබය විවෘත කරමු, විවිධ ආචයන වර්ග අතරින් indexedDB මත ක්ලික් කරමු, මෙහිදී අපි localforage පරීක්ෂා කරමු. දැන් අපගේ යෙදුමේ නිෂ්පාදන එකතු කිරීමේ බොත්තම මත ක්ලික් කර ක්ලික් කිරීමෙන් පසු localforage ආචයනය යාවත්කාලීන කරන විට අපට products අරාවට විවිධ id සහිත වස්තු එකතු වන ආකාරය keyvaluepairs හි දැකගත හැකිය. ජය !!! මෙයින් අදහස් කරන්නේ අපගේ ආචයනයේ වාර්තා සාදනු ලැබෙන බවයි! නිසැකවම අපගේ යෙදුමේ ලැයිස්තුව ද වැඩිවේ. ඉඟිය: පසුව Application හි 'ආචයනය' ටැබයේ මෙම පිටුවේ සුරක්ෂිත දත්ත පිරිසිදු කිරීමට අමතක නොකරන්න.