Tutorial-Leitfaden zu „useContext' und „useReducer' in React: Globale Zustände effizient verwalten

Eine umfassende Anleitung zu useContext und useReducer in React: Global State Efficient managen

Einführung

In React ist die Zustandsverwaltung entscheidend für die Erstellung dynamischer und interaktiver Anwendungen. Während useState und useReducer sich hervorragend für die Handhabung des lokalen Komponentenstatus eignen, was passiert, wenn Sie den globalen Status über mehrere Komponenten hinweg verwalten müssen? Geben Sie useContext und useReducer ein – zwei Hooks, die zusammen verwendet werden können, um die Zustandsverwaltung auf globaler Ebene effizient abzuwickeln.

In diesem Artikel erfahren Sie, wie Sie useContext und useReducer kombinieren, um ein robustes Zustandsverwaltungssystem für Ihre React-App zu erstellen. Wir behandeln die Grundlagen beider Hooks und führen Sie dann durch die Erstellung einer einfachen Anwendung, um zu demonstrieren, wie sie zusammen zur Verwaltung des globalen Status verwendet werden können.

Am Ende dieses Leitfadens haben Sie ein solides Verständnis für Folgendes:

1. useContext: Ein Hook zum Teilen des Status zwischen Ihren Komponenten.
2. useReducer: Ein Hook zur Verwaltung komplexer Zustandslogik.
3. UseContext und useReducer kombinieren: So verwenden Sie beide Hooks zusammen für eine skalierbare globale Zustandslösung.

Lasst uns anfangen!

---

useContext verstehen

Was ist useContext?

useContext ist ein React-Hook, der es Ihnen ermöglicht, den Status (oder einen anderen Wert) in Ihrem Komponentenbaum zu teilen, ohne Requisiten auf jeder Ebene manuell übergeben zu müssen. Dies ist nützlich, wenn Sie mehreren Komponenten gleichzeitig globale Daten bereitstellen müssen.

Die Syntax für useContext lautet:

const value = useContext(MyContext);

Wobei MyContext ein Kontextobjekt ist, das von React.createContext() erstellt wurde.

Wann sollte useContext verwendet werden?

• Um globale Status- oder Konfigurationseinstellungen (z. B. Design, Authentifizierung) zu teilen.
• Das Durchlaufen von Requisiten durch viele Ebenen verschachtelter Komponenten wird umständlich.

---

useReducer verstehen

Was ist useReducer?

useReducer ist ein React-Hook, der zum Verwalten von Zuständen verwendet wird, die komplexe Logik beinhalten oder wenn der Zustand von vorherigen Zuständen abhängt. Es wird oft als Alternative zu useState verwendet, wenn Ihre Statusaktualisierungen auf Aktionen basieren müssen und es mehrere Arten von Statusänderungen gibt.

Die Syntax für useReducer lautet:

const value = useContext(MyContext);

• Reduzierer: Eine Funktion, die einen neuen Zustand basierend auf dem aktuellen Zustand und der aktuellen Aktion zurückgibt.
• initialState: Der Anfangszustand Ihres Reduzierers.
• Versand: Eine Funktion, mit der Aktionen an den Reduzierer gesendet werden, um den Status zu aktualisieren.

---

Kombination von useContext und useReducer

Wenn Sie useContext und useReducer kombinieren, können Sie komplexe Zustände in Ihrer Anwendung teilen und gleichzeitig die Logik für Zustandsübergänge zentralisieren. Dies ist besonders hilfreich, wenn Sie einen globalen Status verwalten, der von jeder Komponente Ihrer App aus zugänglich sein muss.

Warum sie kombinieren?

• Zentralisierter Zustand: useContext bietet den globalen Bereich für den Zustand, und useReducer bietet eine strukturierte Möglichkeit, komplexe Zustandsänderungen zu verwalten.
• Vorhersehbare Updates: Mit useReducer können Sie Zustandsübergänge mit Aktionen und einem Reduzierer vorhersehbar verwalten, während useContext sicherstellt, dass Ihr Zustand für alle Komponenten verfügbar ist.
• Skalierbarkeit: Diese Kombination erleichtert die Skalierung von Anwendungen, die den Zustand über viele Komponenten hinweg verwalten müssen.

---

Beispielprojekt: Eine globale To-Do-Liste

Lassen Sie uns eine einfache Aufgabenlistenanwendung erstellen, in der wir den globalen Status mithilfe von useContext und useReducer verwalten. Die App unterstützt das Hinzufügen, Umschalten und Entfernen von Aufgaben.

Schritt 1: Erstellen Sie den Kontext und den Reduzierer

Wir beginnen damit, einen Kontext zu schaffen, um unseren globalen Zustand festzuhalten, und einen Reduzierer, um Aktionen zu verwalten.

const [state, dispatch] = useReducer(reducer, initialState);

Erläuterung

• todoReducer: Verwaltet den Status der Aufgabenliste, einschließlich Hinzufügen, Umschalten und Entfernen von Aufgaben.
• TodoContext: Stellt einen globalen Kontext für den Status der Aufgabenliste bereit.
• TodoProvider: Dies ist eine Wrapper-Komponente, die allen untergeordneten Elementen den Kontext und den useReducer-Hook bereitstellt.

---

Schritt 2: Erstellen Sie die To-Do-Listenkomponente

Jetzt erstellen wir eine Komponente, die die Aufgabenliste anzeigt und die Funktionalität zum Hinzufügen, Entfernen und Umschalten von Aufgaben bietet.

import React, { createContext, useContext, useReducer } from 'react';

// Initial State
const initialState = [];

// Reducer Function
function todoReducer(state, action) {
  switch (action.type) {
    case 'ADD':
      return [...state, { id: Date.now(), text: action.payload, completed: false }];
    case 'TOGGLE':
      return state.map(todo =>
        todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
      );
    case 'REMOVE':
      return state.filter(todo => todo.id !== action.payload);
    default:
      return state;
  }
}

// Create Context
const TodoContext = createContext();

// Provide Context to App
export function TodoProvider({ children }) {
  const [state, dispatch] = useReducer(todoReducer, initialState);
  return (
    <TodoContext.Provider value={{ state, dispatch }}>
      {children}
    </TodoContext.Provider>
  );
}

---

Zusammenfassung und Fazit

In diesem Artikel haben wir useContext und useReducer kombiniert, um den globalen Status in einer React-Anwendung zu verwalten. Wir gingen durch:

1. useContext: Ein Hook zum Bereitstellen und Konsumieren von Kontext in einem Komponentenbaum.
2. useReducer: Ein Hook, um komplexe Zustandslogik auf vorhersehbare und zentralisierte Weise zu verwalten.
3. Kombination der beiden: Wir haben beide Hooks zusammen verwendet, um eine To-Do-Liste mit Aktionen zum Hinzufügen, Umschalten und Entfernen von Aufgaben zu verwalten.

Dieses Muster ist hochgradig skalierbar. Wenn Ihre App komplexer wird, können Ihnen useContext und useReducer dabei helfen, eine saubere, vorhersehbare und effiziente Zustandsverwaltungslösung aufrechtzuerhalten. Experimentieren Sie mit diesen Konzepten und wenden Sie sie für eine bessere Zustandsverwaltung auf Ihre Projekte an!

Viel Spaß beim Codieren! ?

Das obige ist der detaillierte Inhalt vonTutorial-Leitfaden zu „useContext' und „useReducer' in React: Globale Zustände effizient verwalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!