createAction

Import

import { createAction } from "dreamkit";

Definition

declare 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 { createAction } from "dreamkit";

export default function App() {
  const start = createAction(
    () =>
      new Promise<number>((resolve) => {
        setTimeout(() => resolve(Date.now()), 1000);
      }),
  );
  return (
    <>
      <p>{start.result}</p>
      <button onClick={start} disabled={start.running}>
        Start
      </button>
    </>
  );
}

With usage

import { createAction, Input } from "dreamkit";
import { createSignal } from "solid-js";

function remove(_key: string) {
  return true;
}

export default function App() {
  const [id, setKey] = createSignal("");
  const $remove = createAction(remove).with(() => id());
  return (
    <>
      <Input value={id} onChange={setKey} />
      <button onClick={$remove} disabled={$remove.running}>
        Remove
      </button>
    </>
  );
}