Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Verstehen von Actions und Action Creators | Anwendung von Redux Toolkit in React
State Management mit Redux Toolkit in React

bookVerstehen von Actions und Action Creators

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.

1. Was sind Action Creators in Redux?

2. Was stellt der String "counter/increment" im Code dar?

question mark

Was sind Action Creators in Redux?

Select the correct answer

question mark

Was stellt der String "counter/increment" im Code dar?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 6

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you explain what an action creator does in Redux?

Why should I use descriptive action type strings?

How do I use these action creators in a Redux reducer?

Awesome!

Completion rate improved to 4.17

bookVerstehen von Actions und Action Creators

Swipe um das Menü anzuzeigen

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.

1. Was sind Action Creators in Redux?

2. Was stellt der String "counter/increment" im Code dar?

question mark

Was sind Action Creators in Redux?

Select the correct answer

question mark

Was stellt der String "counter/increment" im Code dar?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 6
some-alt