Das Zustandsmanagement ist das Herzstück moderner Webanwendungen und spielt eine entscheidende Rolle bei der Verwaltung der Benutzerdaten und der Erfassung ihrer Interaktionen. Ganz gleich, ob es darum geht, einen Warenkorb auf einer E-Commerce-Plattform zu füllen oder die Sitzung eines angemeldeten Benutzers nach der Authentifizierung aufrechtzuerhalten – diese Aktionen werden durch eine effiziente Statusverwaltung ermöglicht.

Im Wesentlichen ermöglichen Statusmanager Apps den Zugriff auf die Daten und deren Verarbeitung, um die gewünschten Ergebnisse zu erzielen. Next.js bietet Unterstützung für mehrere Zustandsverwaltungslösungen. In diesem Leitfaden konzentrieren wir uns jedoch auf die Verwendung des Redux Toolkits für die Statusverwaltung.

In Next.js-Anwendungen umfasst die Zustandsverwaltung normalerweise zwei Arten von Zuständen: den globalen Zustand und den Komponentenzustand. Der globale Status enthält Informationen, die von allen Komponenten in der Anwendung gemeinsam genutzt werden, beispielsweise der Authentifizierungsstatus eines Benutzers, während der Komponentenstatus Daten speichert, die für einzelne Komponenten spezifisch sind.

Sowohl der globale Status als auch der Komponentenstatus spielen eine entscheidende Rolle bei der Verwaltung des Gesamtstatus der Anwendung und ermöglichen eine effiziente Datenverarbeitung.

Redux wird allgemein als staatliche Verwaltungslösung eingesetzt verschiedene JavaScript-Frameworks. Allerdings kann es insbesondere bei kleineren Projekten zu Komplexitäten führen.

Ein häufiger Nachteil ist die Notwendigkeit, sich wiederholenden Boilerplate-Code zu schreiben, um Aktionstypen, Aktionsersteller und -reduzierer zu definieren. Dies kann zu einer erhöhten Code-Redundanz führen.

Um diese Herausforderungen zu meistern, Redux-Toolkit (RTK) kommt zur Rettung. Es zielt hauptsächlich darauf ab, die Entwicklungserfahrung bei der Arbeit mit zu optimieren Redux-Statusverwaltungsbibliothek. Es bietet eine Reihe von Tools und Dienstprogrammen, die allgemeine Redux-Aufgaben vereinfachen und den Bedarf an übermäßigem Boilerplate-Code eliminieren.

Lassen Sie uns nun in die Verwendung des Redux Toolkits eintauchen, um den Status in Next.js-Anwendungen zu verwalten. Erstellen Sie zunächst ein Next.js-Projekt und installieren Sie die erforderlichen Abhängigkeiten, indem Sie die folgenden Schritte ausführen.

1. Erstellen Sie lokal ein neues Next.js-Projekt, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

   npx create-next-app@latest next-redux-toolkit

2. Navigieren Sie nach dem Erstellen des Projekts in das Projektverzeichnis, indem Sie Folgendes ausführen:

   cd next-redux-toolkit

3. Installieren Sie abschließend die erforderlichen Abhängigkeiten in Ihrem Projekt mit npm, der Node-Paketmanager.

   npm install @reduxjs/toolkit React-Redux

Sobald Sie ein grundlegendes Next.js-Projekt eingerichtet haben, können Sie nun eine Demo-Next.js-Anwendung erstellen, die Redux Toolkit für die Statusverwaltung verwendet.

Den Code dieses Projekts finden Sie hier GitHub-Repository.

Konfigurieren Sie den Redux Store

Ein Redux-Store ist ein zentraler Container, der den gesamten Status der Anwendung speichert. Es dient als einzige Quelle der Anwendungsdaten und stellt den einzelnen Komponenten Zustände zur Verfügung. Der Store ist für die Verwaltung und Aktualisierung des Status durch Aktionen und Reduzierungen verantwortlich und erleichtert so die Statusverwaltung in der gesamten Anwendung.

Um einen Redux-Store zu erstellen, erstellen Sie einen neuen redux Ordner im Stammverzeichnis Ihres Next.js-Projekts. Erstellen Sie in diesem Ordner einen neuen store.js Datei und fügen Sie den folgenden Code hinzu:

importieren {configureStore} aus'@reduxjs/toolkit';
importieren ProfileReducer aus'./reducers/profileSlice';
ExportStandard configureStore({
 Reduzierer:{
 Profil: ProfileReducer
 }
})

Der obige Code verwendet configureStore Funktion zum Erstellen und Konfigurieren des Redux-Stores. Die Store-Konfiguration umfasst die Angabe von Reduzierern mithilfe von Reduzierstück Objekt.

Reduzierer geben in diesem Fall an, wie sich der Status der Anwendung als Reaktion auf bestimmte Aktionen oder bestimmte Ereignisse ändern soll. In diesem Beispiel ist die Profil Der Reduzierer ist für die Verwaltung von Aktionen im Zusammenhang mit dem Profilstatus verantwortlich.

Durch die Einrichtung des Redux-Stores legt der Code die Kernstruktur für die Verwaltung des Anwendungsstatus mithilfe des Redux Toolkits fest.

Definieren Sie Zustandsabschnitte

Redux-Status-Slices sind Komponenten, die die Logik zur Verwaltung des Status bestimmter Datenelemente innerhalb des konfigurierten Redux-Speichers kapseln. Diese Slices werden mit erstellt createSlice Funktion, die automatisch den Reduzierer, die Aktionsersteller und die Aktionstypen für das Slice generiert.

Im redux Verzeichnis, erstellen Sie einen neuen Ordner und benennen Sie ihn Reduzierstücke. Erstellen Sie in diesem Ordner ProfileSlice.js Datei und fügen Sie den folgenden Code hinzu.

importieren {createSlice} aus'@reduxjs/toolkit';
const ProfileSlice = createSlice({
 Name: 'Profil',
 Ausgangszustand: {
 Name: 'keiner'
 },
 Reduzierstücke: {
 NAME EINSETZEN: (Zustand, Aktion) => {
 state.name = action.payload
 }
}})
Exportconst {SET_NAME} = ProfileSlice.actions;
ExportStandard ProfileSlice.Reducer;

Im bereitgestellten Code ist die createSlice Die Funktion erstellt einen Statusausschnitt für den Benutzerprofilstatus. Der ProfilSlice Das Objekt enthält den Namen des Slice und seine Ausgangszustand, das die Standardwerte für die Zustandseigenschaften enthält.

Darüber hinaus nimmt das Slice-Objekt auch a auf Reduzierstücke Eigenschaft, die die Aktionshandler für dieses Slice definiert. In diesem Fall eine einzelne Reduzierfunktion mit dem Namen NAME EINSETZEN. Sobald Sie diese Funktion aufrufen, aktualisiert sie im Wesentlichen die Namenseigenschaft des Staates mit den bereitgestellten Daten.

Der createSlice Die Funktion generiert automatisch Aktionsersteller und Aktionstypen basierend auf den definierten Reduzierern. Die exportierten NAME EINSETZEN Aktionsschöpfer und ProfileSlice.Reducer stellt den generierten Aktionsersteller und die Reduzierfunktion für das Profilsegment dar.

Durch die Erstellung dieses Zustandsausschnitts können Komponenten innerhalb der Anwendung den nutzen NAME EINSETZEN Aktion und übergeben Sie die gewünschte Nutzlast, um den Profilnamen im Status zu aktualisieren.

Erstellen Sie eine Komponente, um die Statusverwaltungsfunktionalität von RTK zu testen

Öffne das index.js Datei in der Seiten Verzeichnis, löschen Sie den Boilerplate-Next.js-Code und fügen Sie den folgenden Code hinzu.

importieren Stile aus'@/styles/Home.module.css'
importieren {useRef} aus'reagieren'
importieren {useSelector, useDispatch} aus'react-redux'
importieren {NAME EINSETZEN} aus'../../redux/reducers/profileSlice'
FunktionAnzeigename(){
const {name} = useSelector((Zustand) => state.profile)
zurückkehren (

 Ich bin {Name} !!</h1> 
 ) }
ExportStandardFunktionHeim() {
const inputName = useRef()
const Dispatch = useDispatch()
FunktioneinreichenName() {
Konsole.log (Eingabename.aktueller.Wert)
 Versand (SET_NAME(inputName.current.value))
 }
zurückkehren (
 <>

'Name eingeben' ref={inputName} />
Namen eingeben</button>

 </main>
 </>
 )}

Der obige Code erstellt und rendert eine Next.js-Komponente, die es dem Benutzer ermöglicht, einen Namen einzugeben und den bereitgestellten Namen auf der Seite des Browsers anzuzeigen. Effektive Verwaltung des Anwendungsstatus mit dem Redux Toolkit.

Der Anzeigename Komponente nutzt die useSelector Haken, um darauf zuzugreifen Name Eigenschaft aus dem Profilstatus im Redux-Store und rendert sie auf der Seite.

Um einen Namen einzugeben, klickt ein Benutzer auf Name eingeben Taste. Dies ruft die auf einreichenName Funktion, die die auslöst NAME EINSETZEN Aktion mit dem Eingabewert als Nutzlast. Diese Aktion aktualisiert die Namenseigenschaft im Profilstatus.

Aktualisieren Sie die Datei _app.js

Um schließlich Redux Toolkit für die Verwendung in der gesamten Next.js-Anwendung zu konfigurieren, müssen Sie die Anwendung mit umschließen Redux-Anbieter – Dadurch wird sichergestellt, dass der Redux-Speicher und die verfügbaren Zustände für alle Komponenten im zugänglich sind Anwendung.

Öffne das _app.js Datei und aktualisieren Sie sie wie folgt:

importieren {Anbieter} aus'react-redux'
importieren speichern aus'../../redux/store'
ExportStandardFunktionApp({ Komponente, pageProps }) {
zurückkehren (


 </Anbieter> )
}

Starten Sie nun den Entwicklungsserver, um die von Ihnen vorgenommenen Änderungen widerzuspiegeln, und navigieren Sie zu http://localhost: 3000 in Ihrem Browser, um die Anwendung zu testen.

npm run dev

Umgang mit der Datenrehydrierung beim erneuten Laden der Seite

Unter Datenrehydrierung beim Neuladen einer Seite versteht man den Prozess der Wiederherstellung und Initialisierung des Anwendungsstatus beim Neuladen einer Seite. In einer vom Server gerenderten Next.js-Anwendung wird der Anfangszustand zunächst auf dem Server gerendert und dann an den Client gesendet.

Auf dem Client ist JavaScript-Code für die Rekonstruktion des Anwendungsstatus verantwortlich, indem er den vom Server empfangenen serialisierten Status abruft und deserialisiert.

Auf diese Weise kann die Anwendung die erforderlichen Daten nahtlos wiederherstellen und die Sitzung des Benutzers beibehalten. Dieser Ansatz vermeidet unnötiges Abrufen von Daten und sorgt für ein unterbrechungsfreies Benutzererlebnis beim Navigieren zwischen Seiten oder beim Neuladen der Anwendung.

Einer der Vorteile der Verwendung des Redux Toolkits in Next.js-Anwendungen ist seine Einfachheit und entwicklerfreundliche Funktionen. Es reduziert den Boilerplate-Code, der zum Definieren von Aktionen, Reduzierungen und Speicherkonfigurationen erforderlich ist, erheblich, wodurch die Arbeit mit Redux bei der Statusverwaltung einfacher und effizienter wird.