Fresh archive: Actions

Retired product documentation — Fresh and the former admin are retired. These instructions are preserved for migration and historical reference. New projects use Blocks 7.x and Studio's Site Editor.

Retired Fresh / Deno reference. This original guide preserves the earlier runtime APIs, Preact/HTMX examples, and any former admin steps. Use it when maintaining that runtime; consult the Studio Site Editor guides for current editing. Migration notes distinguish editor and framework migration.

An Action in deco.cx is a typescript function that mutates data within the application. Actions are triggered by specific user interactions or events and are responsible for updating the application's state accordingly. Unlike Loaders, which fetch data from external sources, Actions focus on modifying the data already present in the application. They can perform operations such as updating, creating, or deleting data based on the specified logic. Actions provide precise control and flexibility over data mutation and seamlessly integrate with other blocks like Loaders to enable a seamless flow of data within the application.

Actions, like Loaders, are implemented as typescript functions and reside locally in the /actions/ folder of your project. They can be invoked in response to user interactions, form submissions, or any other defined triggers. By encapsulating data mutation logic within Actions, developers can manage and track changes made to the application's state, providing users with dynamic and interactive experiences.

Note: While Loaders focus on fetching data from external sources, Actions concentrate on mutating data within the application. By leveraging both Loaders and Actions in deco.cx, developers can create powerful applications that fetch and manipulate data seamlessly.

One of the great benefits of Actions is their ability to work in conjunction with Loaders and other blocks. While Loaders focus on fetching data, Actions focus on mutating data. This means that multiple Actions can be invoked from the same interface, allowing users to modify data from different sources or perform a series of related operations. By leveraging both Loaders and Actions, developers can create flexible and powerful applications that seamlessly integrate data fetching and mutation.

In addition to mutating data, Actions in deco.cx can also export a typescript props type, which allows them to be configured in the Admin just like Sections.

Example Code

This is the implementation of the newsletter/subscribe.ts Action:

import { AppContext } from "../../mod.ts";
 
export interface Props {
  email: string;
  name?: string;
  page?: string;
  part?: string;
  campaign?: string;
}
 
const action = async (
  props: Props,
  _req: Request,
  ctx: AppContext,
): Promise<void> => {
  const { vcsDeprecated } = ctx;
  const form = new FormData();
  const {
    email,
    name = "",
    part = "newsletter",
    page = "_",
    campaign = "newsletter:opt-in",
  } = props;
 
  form.append("newsletterClientName", name);
  form.append("newsletterClientEmail", email);
  form.append("newsInternalPage", page);
  form.append("newsInternalPart", part);
  form.append("newsInternalCampaign", campaign);
 
  await vcsDeprecated["POST /no-cache/Newsletter.aspx"]({}, {
    body: form,
  });
};
 
export default action;

Source

Example Code

Recommended Reading