Nutzung von Context-API und Redux in React für das Teilen von Zuständen

In React ist das Teilen von Zuständen zwischen Komponenten, die kein direktes Eltern-Kind-Verhältnis haben, eine gängige Herausforderung. Die korrekten Antworten auf diese Herausforderung sind die Verwendung von Context-API und Zustandsverwaltungsbibliotheken wie Redux.

Context-API in React

Einer der Wege, wie man den Zustand zwischen Komponenten in React teilt, ist die Verwendung des Context-API. Das Context-API ist eine eingebaute Funktion in React, die es ermöglicht, dass bestimmte Daten ohne manuelle Weitergabe durch Komponenten über "Props" von einer Komponente zur anderen fließen können.

Ein typischer Anwendungsfall wäre ein Themenwechsler. Statt jedem einzelnen Button einen "onThemeChange"-Prop zu geben, könnten Sie einfach einen "ThemeContext" einrichten und diesen überall verwenden, wo er benötigt wird.

const ThemeContext = React.createContext()

class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <Button />
      </ThemeContext.Provider>
    )
  }
}

function Button(props) {
  return (
    <ThemeContext.Consumer>
      {(theme) => <button theme={theme} />}
    </ThemeContext.Consumer>
  )
}

Zustandsverwaltung mit Redux

Redux hingegen ist eine separate Zustandsverwaltungsbibliothek, die mit beliebigen JavaScript-Apps genutzt werden kann, nicht nur mit React. Redux hilft Ihnen, den Zustand Ihrer gesamten App an einem zentralen Ort zu verwalten und stellt sicher, dass dieser Zustand immer vorhersehbar aktualisiert wird.

In einem typischen Redux-Szenario erstellen Sie einen Store, fügen einige Reducer hinzu, die wissen, wie man den Zustand aktualisiert, und dann senden Sie Aktionen an den Store. Diese Aktionen gehen durch die Reducer, der Zustand wird aktualisiert, und Ihre App wird mit den neuen Daten gerendert.

import { createStore } from 'redux'
import rootReducer from './reducers'

const store = createStore(rootReducer)

store.dispatch({ 
  type: 'ADD_TODO',
  text: 'Learn Redux' 
})

console.log(store.getState())

Die Wahl zwischen Context-API und Redux hängt hauptsächlich von den spezifischen Anforderungen Ihrer App ab. Für einfache Anwendungen ist das Context-API oft ausreichend, während Redux eine robustere und skalierbarere Lösung für größere und komplexere Anwendungen bietet. Beide Methoden sind jedoch gültige Ansätze, um den Zustand zwischen Komponenten in React zu teilen, wenn diese Komponenten nicht direkt Eltern-Kind sind.