Theorie

In Redux 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 können Sie einfach auf den Store zugreifen und ihn ändern.

Übung

Wir haben die Datei store.js im Ordner redux erstellt. Wir sind bereit, den gesamten Store einzurichten. Hier ist ein Beispiel, wie es gemacht 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 mit der configureStore-Funktion, die vom @reduxjs/toolkit-Paket bereitgestellt wird. Lassen Sie uns dies Schritt für Schritt aufschlüsseln.

• Zeile 1: Der Code importiert die configureStore-Funktion aus dem @reduxjs/toolkit-Paket. Diese Funktion vereinfacht den Prozess der Erstellung eines Redux-Stores, indem sie sinnvolle Standardwerte und integrierte Middleware bereitstellt;
• Zeile 2 importiert den counterReducer aus der Datei ./reducers/counterReducer. Diese Reducer-Funktion behandelt die Zustandsänderungen für den "counter"-Slice des Redux-Stores. Die Logik in dieser Datei wird weiter erstellt;
• Zeile 4-8: Die configureStore-Funktion wird mit einem Objekt als Argument aufgerufen. Dieses Objekt gibt die Konfigurationsoptionen des Stores an. In diesem Fall ist die reducer-Option die einzige Option (Zeile 5);
  • Die reducer-Option ist ein Objekt, das die Zustands-Slices ihren entsprechenden Reducer-Funktionen zuordnet. In diesem Fall wird der counter-Slice des Zustands der counterReducer-Funktion zugeordnet;
  • Die configureStore-Funktion gibt ein Redux-Store-Objekt zurück, das den Zustand der Anwendung enthält und Methoden bereitstellt, um mit ihm zu interagieren.
• Zeile 10: Schließlich wird das store-Objekt als Standardexport dieses Moduls exportiert, damit es in anderen Teilen der Anwendung verwendet werden kann.

Hinweis

Zusammenfassend richtet dieser Code einen Redux-Store mit einem einzigen "counter"-Slice des Zustands ein, wobei der counterReducer verwendet wird, um Zustandsänderungen zu behandeln. Der resultierende Store wird dann für die Verwendung in anderen Teilen der Anwendung exportiert.