createAction

import { createAction } from "dreamkit";

Utility to create actions and control them by signals in a safe way.

It is not strictly necessary to use createAction to work with promises (e.g. fetch), but it is recommended, since it allows you to control their activation and monitoring.

---

Definition

const createAction: (cb: (...args: any[]) => any) => {
  with: {
    (input: () => any): any;
    (...args: any[]): any;
  };
  readonly id: number;
  readonly result: any | undefined;
  readonly running: boolean;
  readonly error: Error | undefined;
  readonly state: "idle" | "running" | "success" | "error";
  clear: () => void;
  abort: () => void;
};

---

Examples

Basic usage

import { $api, $route, createAction } from "dreamkit";

export const start = $api.title("Start").create(async () => {
  await new Promise((resolve) => setTimeout(resolve, 1000));
  const id = Date.now();
  if (id % 2) throw new Error("Random error");
  return id;
});

export default $route
  .path("/")
  .api({ start })
  .create(({ api }) => {
    const start = createAction(api.start);
    return (
      <>
        <ul>
          <li>state: {start.state}</li>
          <li>result: {start.result}</li>
          <li>error: {start.error?.message}</li>
        </ul>
        <button
          onClick={start}
          disabled={start.running}
          children={start.title}
        />
        <button
          onClick={start.abort}
          disabled={!start.running}
          children="abort"
        />
      </>
    );
  });

Predefined params

import { $api, $route, createAction, Input, s } from "dreamkit";
import { createEffect, createSignal } from "solid-js";

const remove = $api
  .title("Remove")
  .params({
    key: s.title("Key").string(),
  })
  .create(({ key }) => {
    console.log("Received", { key });
  });

export default $route
  .path("/")
  .api({ remove })
  .create(({ api }) => {
    const [key, setKey] = createSignal("");
    const remove = createAction(api.remove).with(() => ({ key: key() }));
    createEffect(() => {
      if (remove.state === "success") {
        setKey("");
        remove.clear();
      }
    });
    return (
      <>
        <p>
          <Input
            placeholder={remove.params.key.options.title}
            value={key}
            onChange={setKey}
          />
        </p>
        <button
          onClick={remove}
          disabled={remove.running}
          children={remove.title}
        />
      </>
    );
  });