Summary  
This chapter covers organizing a project’s directory structure and defining the shape of data objects for state management.

General domain of usage  
Task management applications


In diesem Abschnitt wird eine einfache **Task Manager**-App erstellt.

Die App ermöglicht es den Nutzern:

* Aufgaben zu erstellen;
* Aufgaben als erledigt zu markieren;
* Aufgaben zu löschen;
* Anfangsaufgaben von einer API zu laden.



## Projektstruktur

```bash
src/
  app/
    store.js
  features/
    tasks/
      tasksSlice.js
  components/
    TaskForm.jsx
    TaskList.jsx
    TaskItem.jsx
  App.jsx
  main.jsx
```



## Aufgabenstruktur

Jede Aufgabe sieht wie folgt aus:

```javascript
{
  id: 1,
  title: 'Learn Redux Toolkit',
  completed: false
}
```

Diese Struktur ist einfach, aber realistisch genug, um Redux Toolkit sinnvoll zu üben.



Die Struktur des Projekts und die Form der Daten wurden definiert. Dies bietet eine klare Grundlage für den Aufbau von State und Funktionen in den nächsten Schritten.

Lernen Sie, wie Sie komplexen Anwendungszustand in React mit Redux Toolkit verwalten. Verstehen Sie, wann Redux tatsächlich benötigt wird, erstellen Sie Zustand mit Slices, verarbeiten Sie asynchrone Daten und verbinden Sie alles zu einem vorhersehbaren Ablauf.

Verstehen, warum Redux Toolkit existiert und wann es nützlich wird. Erkennen, wie die Komplexität des Zustands in realen Anwendungen zunimmt und warum einfache Ansätze nicht mehr skalieren.

Installation von Redux Toolkit und Einrichtung des Stores. Anbindung von Redux an eine React-Anwendung und Verständnis des Datenflusses im System.

Definition von Zustand mithilfe von Slices und klare Organisation der Logik. Erstellung von Reducern, Verwendung generierter Actions und Beibehaltung der Übersichtlichkeit des Zustands mit wachsender Anwendung.

Daten mit useSelector aus dem Store lesen und mit useDispatch aktualisieren. Zustand korrekt strukturieren und häufige Fehler beim Arbeiten mit gemeinsam genutzten Daten vermeiden.

Abrufen von Daten aus APIs mit createAsyncThunk. Verwaltung von Lade- und Fehlerzuständen sowie Synchronisierung der Benutzeroberfläche mit asynchronen Aktualisierungen.

Aufteilung des Zustands in mehrere Slices und Organisation der Dateien nach Funktionalität. Saubere Kombination von Reducern und Beibehaltung einer klaren Struktur mit wachsender Anwendung.

Erstellung einer vollständigen Anwendung mit Redux Toolkit. Implementierung von CRUD-Funktionen, Verarbeitung asynchroner Daten und Verbesserung der Benutzererfahrung durch Lade- und Fehlerzustände.

Project Setup and Data Structure

Projektstruktur

Aufgabenstruktur