Theorie

Im Redux-Framework fungiert der Store als einzige Quelle der Wahrheit für den Zustand einer Anwendung. Er enthält den vollständigen Zustandsbaum und ist unveränderlich. Um den Zustand zu ändern, müssen Aktionen ausgelöst werden. Mit den Funktionen und Hooks des Redux Toolkit kann auf den Store einfach zugegriffen und dieser modifiziert werden.

Praxis

Die Datei store.js wurde im Ordner redux erstellt. Nun kann der gesamte Store eingerichtet werden. Hier ein Beispiel, wie dies umgesetzt werden kann:

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./reducers/counterReducer";

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

Code-Erklärung: Dieser Code konfiguriert den Redux Store mithilfe der Funktion configureStore aus dem Paket @reduxjs/toolkit. Die einzelnen Schritte im Überblick:

• Zeile 1: Import der Funktion configureStore aus dem Paket @reduxjs/toolkit. Diese Funktion vereinfacht die Erstellung eines Redux Stores durch sinnvolle Voreinstellungen und integrierte Middleware;
• Zeile 2: Import des counterReducer aus der Datei ./reducers/counterReducer. Diese Reducer-Funktion verarbeitet die Zustandsänderungen für den "counter"-Slice des Redux Stores. Die Logik in dieser Datei wird später erstellt;
• Zeile 4-8: Aufruf der Funktion configureStore mit einem Objekt als Argument. Dieses Objekt definiert die Konfigurationsoptionen des Stores. In diesem Fall ist die Option reducer die einzige Option (Zeile 5);
  • Die Option reducer ist ein Objekt, das die State-Slices ihren jeweiligen Reducer-Funktionen zuordnet. Hier wird der counter-Slice dem counterReducer zugewiesen;
  • Die Funktion configureStore gibt ein Redux Store-Objekt zurück, das den Anwendungszustand enthält und Methoden zur Interaktion bereitstellt.
• Zeile 10: Abschließend wird das store-Objekt als Standardexport dieses Moduls exportiert, sodass es in anderen Teilen der Anwendung verwendet werden kann.

Hinweis

Zusammenfassend richtet dieser Code einen Redux Store mit einem einzelnen "counter"-Slice des Zustands ein, wobei der counterReducer zur Verwaltung von Zustandsänderungen verwendet wird. Der resultierende Store wird anschließend für die Verwendung in anderen Teilen der Anwendung exportiert.