Action

Grundlagen

Die Action wird verwendet, um das asynchrone Verhalten von zum Beispiel Buttons zu steuern. Sie wird genutzt, um den Usern visuelles Feedback bei Interaktionen zu geben, zum Beispiel durch Ladezustände oder Bestätigungsmodals.

Best Practices

Achte bei der Verwendung einer Action darauf, dass ...

• der Pending State nur für Vorgänge verwendet wird, die in der Regel unter 5 Sekunden dauern. Für längere Prozesse kann eine Notification die bessere Wahl sein.
• Feedback States nur dann eingesetzt werden, wenn sie dem Nutzer einen Mehrwert in der Interaktion bieten.

Verwendung

Verwende eine Action, um ...

• einen Button mit einem automatisierten Lade- und Erfolgs-Feedback bei asynchronen Prozessen zu versehen.
• Useraktionen mit Bestätigungsmodals zu sichern, bevor ein kritischer Vorgang gestartet wird.

Playground

Lege <Action />, um einen Button, um die States des Buttons zu steuern.

import {
  Action,
  Button,
} from "@mittwald/flow-react-components";
import { sleep } from "@/content/04-components/actions/action/examples/lib";

<Action onAction={sleep}>
  <Button color="accent">Speichern</Button>
</Action>

Pending

Wenn eine asynchrone Aktion länger als 1000 Millisekunden dauert, wird der Pending State angezeigt.

Feedback

Wenn ein visuelles Feedback nach einer Userinteraktion angezeigt werden soll, kann das Property showFeedback genutzt werden.

Bestätigungsmodal

Um User vor unbeabsichtigten Aktionen zu schützen, kann ein Bestätigungsmodal angezeigt werden. Dafür muss innerhalb der Action ein Modal mit dem Attribut slot="actionConfirm" platziert werden.

Verschachtelte Actions

Wenn mehrere Aktionen auf eine Userinteraktion folgen, können Actions auch ineinander verschachtelt werden.

In MenuItems

Actions können auch um MenuItems gelegt werden, um deren State zu steuern.

Actions abbrechen

Wenn eine Action abgebrochen werden soll, ohne einen Fehler auszulösen, kann die Funktion abortAction aus dem Action-Modul verwendet werden. Diese Funktion wirft einen speziellen Fehler, der von der Action-Component erkannt wird. Dadurch kann die Action sauber abgebrochen werden, ohne dass unerwünschte Fehlermeldungen oder Seiteneffekte auftreten.

Alle nachfolgenden Funktionen in der Action-Execution-Logik, die nach dem Aufruf von abortAction definiert sind, werden nicht mehr ausgeführt. Das bedeutet, dass der gesamte Ablauf der Action sofort gestoppt wird, sobald abortAction aufgerufen wird.

Umschließende Actions bei einer Verschachtelung von Actions werden ebenfalls abgebrochen, wenn abortAction in einer inneren Action aufgerufen wird.

import { sleep } from "@/content/04-components/actions/action/examples/lib";
import {
  abortAction,
  Action,
  Button,
} from "@mittwald/flow-react-components";

<Action
  onAction={() => {
    console.log("Outer action");
  }}
>
  <Action
    onAction={async () => {
      await sleep();
      console.log("Inner action");
      abortAction();
    }}
  >
    <Button>Start action</Button>
  </Action>
</Action>

Properties

Events