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 erzeugt Actions zum Erhöhen des Zählers;
  • Der als Argument übergebene String "counter/increment" stellt den Action-Typ dar. Er hilft, die Action beim Dispatch zu identifizieren.
• Zeile 4: Analog dazu wird die Action Creator-Funktion decrement mit createAction erstellt. Diese Funktion erzeugt Actions zum Verringern des Zählers.
  • Der String "counter/decrement" steht für den Action-Typ zum Verringern.

Durch die Verwendung von createAction erzeugen diese Funktionen Action-Objekte 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.