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 Toolkits kann auf den Store einfach zugegriffen und dieser angepasst werden.

Praxis

Die Datei store.js wurde im Ordner redux erstellt. Nun kann der gesamte Store eingerichtet werden. Nachfolgend 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. Im Folgenden wird der Code Schritt für Schritt erläutert.

• Zeile 1: Die Funktion configureStore wird aus dem Paket @reduxjs/toolkit importiert. Diese Funktion vereinfacht die Erstellung eines Redux Stores durch sinnvolle Voreinstellungen und integrierte Middleware;
• Zeile 2 importiert den counterReducer aus der Datei ./reducers/counterReducer. Diese Reducer-Funktion verwaltet die Zustandsänderungen für den "counter"-Slice des Redux Stores. Die Logik in dieser Datei wird später erstellt;
• Zeile 4-8: Die Funktion configureStore wird mit einem Objekt als Argument aufgerufen. 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. In diesem Fall wird der counter-Slice des States der Funktion counterReducer zugeordnet;
  • 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 States ein, wobei der counterReducer zur Verwaltung von Statusänderungen verwendet wird. Der resultierende Store wird anschließend für die Nutzung in anderen Teilen der Anwendung exportiert.