Tietojen lisääminen action-metodilla React Routerissa

Tällä oppitunnilla tutustumme reitin objektin action -metodiin. Tätä metodia kutsutaan, kun sovellus lähettää HTTP-pyynnön tyyppiä POST, PUT, PATCH tai DELETE (paitsi GET) reitillesi.

Aluksi tuomme tuotteen luomisfunktion, joka kirjoitimme edellisellä oppitunnilla, tiedostoomme root.jsx:

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

Nyt meidän on luotava action -funktio, jota React Router kutsuu kun tuotteen lisäämispainiketta klikataan, sijoita se loader-funktion jälkeen:

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

Avataan main.jsx ja tuodaan action:

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

Ja asetetaan se arvoksi action -metodille reittiobjektille. Form -komponentti estää selainta lähettämästä pyyntöjä palvelimelle painiketta painettaessa, vaan ottaa yhteyttä reittimme action -metodiin. Näin mielenkiintoisesti toimii asiakaspuolen reititys React Routerilla:

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

Käynnistetään sovelluksemme. Avataan välilehti 'Application' (Application Chrome) kehittäjän työkalupaneelissa, eri tallennustiloista klikataan indexedDB, tässä meitä kiinnostaa localforage. Nyt klikkaamalla tuotteiden lisäämispainiketta sovelluksessamme ja päivittämällä localforage-tallennustilaa klikkauksen jälkeen näemme, kuinka keyvaluepairs-taulukkoon products lisätään objekteja erilaisilla id -arvoilla. Voitto!!! Tämä tarkoittaa, että tallennustilaamme luodaan tietueita! Tietenkin lista sovelluksessamme myös täydentyy. Vihje: muista tyhjentää myöhemmin tallennetut tiedot tältä sivulta 'Storage' -välilehdellä Applicationissa.