Theorie

Actions sind Informationspakete, die die gewünschten Änderungen am Zustand beschreiben. Action Creators sind Funktionen, die Actions erzeugen. Sie kapseln die Logik zur Erstellung von Actions und können in der gesamten Anwendung wiederverwendet werden.

Praxis

Wir haben eine Datei namens counterAction.js im Ordner 'actions'. Diese Datei definiert Actions und Action Creators für die Zählerfunktionalität.

import { createAction } from "@reduxjs/toolkit";

export const increment = createAction("counter/increment");
export const decrement = createAction("counter/decrement");

Code-Erklärung:

• Zeile 1: Import der Funktion createAction aus dem Paket @reduxjs/toolkit. Diese Funktion vereinfacht die Erstellung von Action Creators;
• Zeile 3: Erstellung der Action Creator-Funktion increment mit createAction. Diese Funktion generiert Actions zum Erhöhen des Zählers;
  • Der String "counter/increment", der als Argument übergeben wird, stellt den Action-Typ dar. Er hilft, die Action beim Dispatch zu identifizieren.
• Zeile 4: Ebenso wird die Action Creator-Funktion decrement mit createAction erstellt. Diese Funktion generiert Actions zum Verringern des Zählers.
  • Der String "counter/decrement" stellt den Action-Typ für das Verringern dar.

Durch die Verwendung von createAction erzeugen diese Funktionen Aktionsobjekte mit einer type-Eigenschaft, die auf den angegebenen Typ-String gesetzt ist. Diese Actions können in Redux-Reducer oder React-Komponenten dispatcht werden, um den Redux Store zu aktualisieren.

Hinweis

Aktions-Typ-Strings wie "counter/increment" und "counter/decrement" sollten aussagekräftig sein und den Zweck der Aktion widerspiegeln. Es ist üblich, den Aktions-Typ mit dem Feature- oder Slice-Namen zu präfixieren, um eine bessere Organisation zu gewährleisten. Die Verwendung von String-Konstanten oder Variablen wird für Konsistenz und einfacheres Refactoring empfohlen.