Warum Context kein "State Management" -Tool ist

TL; DR

Sind Context und Redux gleich?

Nein. Sie sind verschiedene Werkzeuge, die verschiedene Dinge tun und für verschiedene Zwecke verwendet werden.

Ist der Kontext ein Werkzeug für "State Management"?

Nein. Der Kontext ist eine Form der Abhängigkeitsinjektion. Es ist ein Transportmechanismus, der nichts kontrolliert. Jede "Statusverwaltung" erfolgt manuell, normalerweise mithilfe der Hooks useState () / useReducer ().

Sind Context und useReducer () ein Ersatz für Redux?

Nein. Sie sind etwas ähnlich und überlappen sich teilweise, unterscheiden sich jedoch stark in Bezug auf die Fähigkeiten.

Wann sollten Sie den Kontext verwenden?

Wenn Sie einige Daten mehreren Komponenten zur Verfügung stellen möchten, diese Daten jedoch nicht auf jeder Ebene des Komponentenbaums als Requisiten übergeben möchten.

Wann sollten Sie Context und useReducer () verwenden?

Wenn Sie den Status einer mäßig komplexen Komponente in einem bestimmten Teil Ihrer Anwendung verwalten müssen.

Wann sollten Sie Redux verwenden?

Redux ist am nützlichsten, wenn:

• Große Anzahl zustandsbehafteter Komponenten, die dieselben Daten verwenden
• Der App-Status wird häufig aktualisiert
• Komplexe Logik zum Aktualisieren des Status
• Die Anwendung hat eine mittlere bis große Codebasis und viele Leute arbeiten daran
• Sie möchten wissen, wann, warum und wie der Anwendungsstatus aktualisiert wird, und diese Änderungen visualisieren können
• Sie benötigen leistungsfähigere Funktionen für den Umgang mit Nebenwirkungen, Stabilität (Persistenz) und Datenserialisierung

Kontext und Redux verstehen

Um das Tool richtig zu verwenden, ist es wichtig zu verstehen:

• Wofür ist das
• Welche Aufgaben löst es?
• Wann und warum wurde es erstellt

Es ist auch wichtig zu verstehen, welche Probleme Sie in Ihrer Anwendung lösen möchten, und die Tools zu verwenden, die sie am besten lösen, nicht weil Ihnen jemand gesagt hat, sie zu verwenden, und nicht, weil sie beliebt sind, sondern weil sie in einer Anwendung am besten für Sie funktionieren besondere Situation.



Die Verwirrung um Context und Redux ist hauptsächlich auf ein Missverständnis darüber zurückzuführen, wofür diese Tools bestimmt sind und welche Aufgaben sie lösen. Bevor Sie darüber sprechen, wann sie verwendet werden sollten, müssen Sie daher feststellen, was sie sind und welche Probleme sie lösen.

Was ist Kontext?

Beginnen wir mit der Definition des Kontexts aus der offiziellen Dokumentation :



„Der Kontext ermöglicht die Übertragung von Daten durch den Komponentenbaum, ohne dass Requisiten auf mittleren Ebenen übergeben werden müssen.



In einer typischen React-Anwendung werden Daten mithilfe von Requisiten von oben nach unten (von Eltern zu Kind) übertragen. Diese Methode kann jedoch für einige Arten von Requisiten (z. B. ausgewählte Sprache, Schnittstellenthema), die an viele Komponenten in einer Anwendung übergeben werden müssen, übertrieben sein. Der Kontext bietet eine Möglichkeit, solche Daten auf Komponenten zu verteilen, ohne Requisiten auf jeder Ebene des Komponentenbaums explizit übergeben zu müssen. "



Bitte beachten Sie, dass diese Definition kein Wort über "Management" sagt, sondern nur über "Übertragung" und "Verteilung".



Die aktuelle Kontext-API (React.createContext ()) wurde erstmals in React 16.3 als Ersatz für die in früheren Versionen von React verfügbare Legacy-API eingeführt, weist jedoch mehrere Designfehler auf. Eines der Hauptprobleme bestand darin, dass Aktualisierungen von Werten, die über den Kontext übergeben wurden, "blockiert" werden konnten, wenn die Komponente das Rendern über shouldComponentUpdate () übersprang. Da viele Komponenten zu Optimierungszwecken auf shouldComponentUpdate () zurückgegriffen haben, wurde das Übertragen von Daten durch den Kontext unbrauchbar. createContext () wurde entwickelt, um dieses Problem zu beheben. Daher wird jede Aktualisierung des Werts in den untergeordneten Komponenten angezeigt, auch wenn die Zwischenkomponente das Rendern überspringt.

Kontext verwenden

Die Verwendung des Kontexts in einer Anwendung setzt Folgendes voraus:

• Rufen Sie const MyContext = React.createContext () auf, um das Kontextobjekt zu instanziieren
• Rendern Sie in der übergeordneten Komponente & ltMyContext.Provider value = {someValue}>. Dies setzt einige Daten in einen Kontext. Diese Daten können beliebig sein: Zeichenfolge, Nummer, Objekt, Array, Klasseninstanz, Ereignishandler usw.
• Rufen Sie den Kontextwert in einer beliebigen Komponente innerhalb des Anbieters ab, indem Sie const theContextValue = useContext (MyContext) aufrufen.

Wenn die übergeordnete Komponente aktualisiert und die neue Referenz als Anbieterwert übergeben wird, muss jede Komponente, die den Kontext "verbraucht", aktualisiert werden.



In der Regel ist der Kontextwert der Status der Komponente:

import { createContext } from 'react'

export const MyContext = createContext()

export function ParentComponent({ children }) {
  const [counter, setCounter] = useState(0)

  return (
    <MyContext.Provider value={[counter, setCounter]}>
      {children}
    </MyContext.Provider>
  )
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Die untergeordnete Komponente kann dann den useContext () - Hook aufrufen und den Kontextwert lesen:

import { useContext } from 'react'
import { MyContext } from './MyContext'

export function NestedChildComponent() {
  const [counter, setCounter] = useContext(MyContext)

  // ...
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Wir können sehen, dass der Kontext nichts wirklich kontrolliert. Stattdessen ist es eine Art Pfeife. Sie setzen Daten mit <MyContext.Provider> am Anfang (oben) des Tunnels ein. Diese Daten werden dann heruntergerollt, bis die Komponente sie mit useContext (MyContext) anfordert.



Daher besteht der Hauptzweck des Kontexts darin, das Bohren von Propellern zu verhindern. Anstatt Daten als Requisiten auf jeder Ebene des Komponentenbaums zu übergeben, kann jede in <MyContext.Provider> verschachtelte Komponente über useContext (MyContext) darauf zugreifen. Dadurch muss kein Code mehr geschrieben werden, um die Prop-Passing-Logik zu implementieren.



Konzeptionell ist dies eine Form der Abhängigkeitsinjektion... Wir wissen, dass das Kind Daten eines bestimmten Typs benötigt, aber es versucht nicht, diese Daten selbst zu erstellen oder festzulegen. Stattdessen ist ein Vorfahr erforderlich, um diese Daten zur Laufzeit zu übergeben.

Was ist Redux?

In der Definition von Redux Basics heißt es :



„Redux ist ein Entwurfsmuster und eine Bibliothek zum Verwalten und Aktualisieren des Anwendungsstatus mithilfe von Ereignissen, die als Operationen bezeichnet werden. Redux fungiert als zentrales Repository für den Anwendungsstatus und befolgt die Regeln, um vorhersehbare Statusaktualisierungen sicherzustellen.



Mit Redux können Sie den "globalen" Status verwalten, der an mehrere Teile Ihrer Anwendung weitergeleitet wird.



Mit den von Redux bereitgestellten Mustern und Tools können Sie leichter feststellen, wo, wann, warum und wie der Status aktualisiert wurde und wie die Anwendung auf diese Änderung reagiert hat. “



Bitte beachten Sie, dass diese Beschreibung Folgendes angibt:

• Staatsverwaltung
• Der Zweck von Redux besteht darin, festzustellen, warum und wie eine Zustandsänderung stattgefunden hat

Redux war ursprünglich eine Implementierung der "Flux-Architektur" , eines Entwurfsmusters, das 2014 von Facebook entwickelt wurde, ein Jahr nach der Veröffentlichung von React. Seit dem Aufkommen von Flux hat die Community viele Bibliotheken entwickelt, die dieses Konzept auf unterschiedliche Weise implementieren. Redux erschien im Jahr 2015 und wurde dank seines durchdachten Designs, der Lösung allgemeiner Probleme und der hervorragenden Kompatibilität mit React schnell zum Gewinner dieses Wettbewerbs.



Architektonisch verwendet Redux nachdrücklich die Prinzipien der funktionalen Programmierung, mit denen Sie Code in Form vorhersehbarer "Reduzierer" schreiben und die Idee von "was passiert ist" von der Logik trennen, die definiert, "wie der Status aktualisiert wird, wenn dies geschieht." Ereignis tritt ein. " Redux verwendet Middleware auch, um die Funktionen des Geschäfts zu erweitern, einschließlich der Behandlung von Nebenwirkungen .



Redux bietet auch Entwicklertools, mit denen Sie den Verlauf von Vorgängen und Statusänderungen im Laufe der Zeit untersuchen können.

Redux und reagieren

Redux selbst ist unabhängig von der Benutzeroberfläche - Sie können es mit jeder Ansichtsebene (React, Vue, Angular, Vanilla JS usw.) oder ohne Benutzeroberfläche verwenden.



Am häufigsten wird Redux jedoch in Verbindung mit React verwendet. Die React Redux- Bibliothek ist die offizielle UI-Bindungsschicht, mit der React-Komponenten mit dem Redux-Speicher interagieren können, indem Werte aus dem Redux-Status abgerufen und Vorgänge initiiert werden. React-Redux verwendet den Kontext intern. Es sollte jedoch beachtet werden, dass React-Redux durch den Kontext eine Redux-Speicherinstanz durchläuft, nicht den aktuellen Statuswert!Dies ist ein Beispiel für die Verwendung des Kontexts für die Abhängigkeitsinjektion. Wir wissen, dass unsere mit Redux verbundenen Komponenten mit dem Redux-Speicher interagieren müssen, aber wir wissen nicht oder kümmern uns nicht darum, was dieser Speicher ist, wenn wir die Komponente definieren. Der echte Redux-Speicher wird zur Laufzeit mithilfe der von React-Redux bereitgestellten <Provider> -Komponente in den Baum eingefügt.



Daher kann React-Redux auch verwendet werden, um "Bohren" zu verhindern (aufgrund der internen Verwendung des Kontexts). Anstatt den neuen Wert explizit über <MyContext.Provider> zu übergeben, können wir diese Daten in den Redux-Speicher einfügen und sie dann in der gewünschten Komponente abrufen.

Zweck und Anwendungsfälle von (Reaktions-) Redux

Der Hauptzweck von Redux laut offizieller Dokumentation:



"Die von Redux bereitgestellten Muster und Tools erleichtern das Verständnis, wann, wo, warum und wie eine Statusänderung stattgefunden hat und wie die Anwendung darauf reagiert hat."



Es gibt mehrere weitere Gründe für die Verwendung von Redux. Einer dieser Gründe ist das Verhindern von "Bohren".



Andere Anwendungsfälle:

• Vollständige Trennung der Statusverwaltungslogik und der UI-Schicht
• Verteilung der Statusverwaltungslogik auf verschiedene UI-Ebenen (z. B. beim Übersetzen einer Anwendung von AngularJS nach React)
• Verwenden der Redux-Middleware zum Hinzufügen zusätzlicher Logik beim Initialisieren von Vorgängen
• Möglichkeit, Teile des Redux-Status zu speichern
• Möglichkeit, Fehlerberichte zu erhalten, die von anderen Entwicklern reproduziert werden können
• Möglichkeit zum schnellen Debuggen von Logik und Benutzeroberfläche während der Entwicklung

Dan Abramov hat diese Fälle in seinem Artikel 2016 aufgeführt, warum Sie möglicherweise kein Redux benötigen .

Warum ist Kontext kein Werkzeug für "State Management"?

Status sind alle Daten, die das Verhalten einer Anwendung beschreiben . Wir können den Status in Kategorien wie Serverstatus, Kommunikationsstatus und lokalen Status einteilen, wenn wir möchten, aber der Schlüsselaspekt ist das Speichern, Lesen, Aktualisieren und Verwenden von Daten.



David Khourshid, Autor der XState-Bibliothek und Spezialist für Staatsverwaltung, bemerkte in einem seiner Tweets:



"Bei der Staatsverwaltung geht es darum, den Zustand im Laufe der Zeit zu ändern."



Wir können also sagen, dass "Staatsmanagement" Folgendes bedeutet:

• Den Anfangswert speichern
• Den aktuellen Wert abrufen
• Einen Wert aktualisieren

Außerdem gibt es normalerweise eine Möglichkeit, benachrichtigt zu werden, wenn sich der aktuelle Statuswert geändert hat.



Die React-Hooks useState () und useReducer () sind hervorragende Beispiele für die Statusverwaltung. Mit diesen Haken können wir:

• Speichern Sie den Anfangswert, indem Sie einen Hook aufrufen
• Den aktuellen Wert erhalten Sie auch durch Aufrufen des Hooks
• Aktualisieren Sie den Wert, indem Sie setState () bzw. dispatch () aufrufen
• Beachten Sie Statusaktualisierungen, indem Sie die Komponente erneut rendern

Mit Redux und MobX können Sie auch den Status verwalten:

• Redux speichert den Anfangswert durch Aufrufen des Root-Reduzierers, ermöglicht das Lesen des aktuellen Werts mit store.getState (), das Aktualisieren des Werts mit store.dispatch (Aktion) und das Empfangen von Statusaktualisierungsbenachrichtigungen über store.subscribe (Listener).
• MobX behält einen Anfangswert bei, indem einem Speicherklassenfeld ein Wert zugewiesen wird, ermöglicht das Lesen und Aktualisieren des aktuellen Werts über Speicherfelder und empfängt Statusaktualisierungsbenachrichtigungen mithilfe der Methoden autorun () und computed ()

Zu den Statusverwaltungstools gehören sogar Server-Cache-Tools wie React-Query, SWR, Apollo und Urql. Sie speichern einen Anfangswert basierend auf abgerufenen Daten, geben den aktuellen Wert mithilfe von Hooks zurück und ermöglichen die Aktualisierung von Werten über "Servermutationen" und Benachrichtigungen die Änderungen durch erneutes Rendern der Komponente.

Der Reaktionskontext erfüllt nicht die genannten Kriterien. Daher ist es kein Statusverwaltungswerkzeug

Wie bereits erwähnt, speichert der Kontext selbst nichts. Die übergeordnete Komponente, die <MyContext.Provider> rendert, ist für die Übergabe des Werts verantwortlich, der normalerweise vom Status der Komponente abhängt. Die eigentliche "Statusverwaltung" stammt aus den Hooks useState () / useReducer ().



David Khourshid bemerkt auch:



„Der Kontext ist, wie der vorhandene Zustand zwischen Komponenten geteilt wird. Der Kontext macht nichts mit dem Staat. "



Und in einem späteren Tweet :



"Ich denke, der Kontext ist wie versteckte Requisiten in diesem abstrakten Zustand."



Alles, was dieser Kontext tut, ist, "Bohren" zu vermeiden.

Kontext und Redux vergleichen

Vergleichen wir die Funktionen des Kontexts und von React + Redux:

• Kontext
• • Speichert nichts und verwaltet nichts
  • Funktioniert nur in React-Komponenten
  • Übergibt einen einfachen (einzelnen) Wert, der alles sein kann (primitiv, Objekt, Klasse usw.)
  • Lesen wir diese einfache Bedeutung
  • Kann verwendet werden, um "Bohren" zu verhindern
  • Zeigt den aktuellen Wert für die Provider- und Consumer-Komponenten in den Entwicklertools an, zeigt jedoch nicht den Verlauf der Änderungen an diesem Wert an
  • Aktualisiert verbrauchende Komponenten, wenn sich der Wert ändert, lässt jedoch nicht zu, dass das Update übersprungen wird
  • Bietet keinen Mechanismus zur Behandlung von Nebenwirkungen - nur für das Rendern verantwortlich
  
  
  
• Reagiere + Redux
• • Speichert und verwaltet einen einfachen Wert (normalerweise ein Objekt)
  • Funktioniert mit jeder Benutzeroberfläche sowie außerhalb von React-Komponenten
  • Lesen wir diese einfache Bedeutung
  • Kann verwendet werden, um "Bohren" zu verhindern
  • Kann den Wert aktualisieren, indem Vorgänge initialisiert und Reduzierungen ausgeführt werden
  • Entwicklertools zeigen den Verlauf der Initialisierung von Vorgängen und Statusänderungen
  • Bietet die Möglichkeit, Middleware zur Behandlung von Nebenwirkungen zu verwenden
  • Ermöglicht es Komponenten, Speicheraktualisierungen zu abonnieren, bestimmte Teile des Speicherstatus abzurufen und das erneute Rendern von Komponenten zu steuern
  
  
  

Offensichtlich handelt es sich hierbei um völlig unterschiedliche Tools mit unterschiedlichen Funktionen. Der einzige Schnittpunkt zwischen ihnen besteht darin, ein "Bohren" zu verhindern.

Kontext und useReducer ()

Eines der Probleme bei der Diskussion "Kontext versus Redux" ist, dass die Leute oft tatsächlich meinen: "Ich verwende useReducer (), um Status und Kontext zu verwalten, um Werte zu übergeben." Stattdessen sagen sie nur: "Ich benutze den Kontext." Dies ist meiner Meinung nach der Hauptgrund für die Verwirrung, die zur Aufrechterhaltung des Mythos beiträgt, dass der Kontext "den Staat kontrolliert".



Betrachten Sie die Kombination von Context + useReducer (). Ja, diese Kombination sieht Redux + React-Redux sehr ähnlich. Beide Kombinationen haben:

• Gespeicherter Wert
• Reduzierfunktion
• Möglichkeit zum Initialisieren von Vorgängen
• Die Möglichkeit, einen Wert zu übergeben und in verschachtelten Komponenten zu lesen

Es gibt jedoch noch einige wichtige Unterschiede zwischen ihnen, die sich in ihren Fähigkeiten und ihrem Verhalten manifestieren. Ich habe diese Unterschiede im React-, Redux- und Context-Verhalten sowie im (fast) vollständigen Leitfaden zum Rendern in React festgestellt . Zusammenfassend kann Folgendes festgestellt werden:

• Context + useReducer () setzt voraus, dass der aktuelle Wert durch den Kontext geleitet wird. React-Redux leitet die aktuelle Redux-Speicherinstanz durch den Kontext
• Dies bedeutet, dass, wenn useReducer () einen neuen Wert erzeugt, alle im Kontext abonnierten Komponenten neu gezeichnet werden müssen, auch wenn sie nur einen Teil der Daten verwenden. Dies kann zu Leistungsproblemen führen, die von der Größe des Statuswerts, der Anzahl der signierten Komponenten und der Häufigkeit des erneuten Renderns abhängen. Mit React-Redux können Komponenten einen bestimmten Teil des Speicherwerts abonnieren und erst dann neu zeichnen, wenn sich dieser Teil ändert

Es gibt andere wichtige Unterschiede:

• Context + useReducer () sind integrierte Funktionen von React und können nicht außerhalb von React verwendet werden. Der Redux-Speicher ist UI-unabhängig und kann daher separat von React verwendet werden
• React DevTools , . Redux DevTools , ( , type and payload),
• useReducer() middleware. useEffect() useReducer(), useReducer() middleware, Redux middleware

Hier ist , was Sebastian Markbage (React Core Team Architect) sagte über Zusammenhang mit :



„Meine persönliche Meinung ist , dass der neue Kontext ist bereit für unwahrscheinlich niedrigen Frequenz - Updates verwendet werden (wie Lokalisierung oder Thema). Es kann auch in allen Fällen verwendet werden, in denen der alte Kontext verwendet wurde, d. H. für statische Werte mit anschließender Verteilung des Updates per Abonnement. Es ist nicht bereit, als Ersatz für Flux-ähnliche staatliche Verteiler verwendet zu werden. "



Es gibt viele Artikel im Internet, in denen empfohlen wird, mehrere separate Kontexte für verschiedene Teile des Staates einzurichten, um unnötige Renderings zu vermeiden und Scoping-Probleme zu lösen. In einigen Beiträgen wird auch vorgeschlagen, eigene " Kontextkomponenten " hinzuzufügen , für die eine Kombination aus React.memo (), useMemo () und die saubere Aufteilung des Codes in zwei Kontexte für jeden Teil der Anwendung erforderlich ist (einer für Daten, einer für Aktualisierungsfunktionen). Natürlich können Sie Code auf diese Weise schreiben, aber in diesem Fall erfinden Sie React-Redux neu.



Während Context + useReducer () in erster Näherung eine leichte Alternative zu Redux + React-Redux ist ... diese Kombinationen sind nicht identisch, kann context + useReducer () Redux nicht vollständig ersetzen!

Das richtige Werkzeug auswählen

Um das richtige Werkzeug auszuwählen, ist es sehr wichtig zu verstehen, welche Aufgaben das Werkzeug löst und welchen Aufgaben Sie gegenüberstehen.

Anwendungsfallübersicht

• Kontext
  
  
  • Übertragung von Daten an verschachtelte Komponenten ohne "Bohren"
  
  
  
• useReducer ()
  
  
  • Steuerung des Zustands einer komplexen Komponente mithilfe einer Reduzierfunktion
  
  
  
• Kontext + useReducer ()
  
  
  • Verwalten des Status einer komplexen Komponente mithilfe einer Reduzierungsfunktion und Übertragen des Status auf verschachtelte Komponenten ohne "Bohren"
  
  
  
• Redux
  
  
  • Steuerung eines sehr komplexen Zustands mit Reduzierfunktionen
  • Rückverfolgbarkeit von wann, warum und wie sich der Zustand im Laufe der Zeit verändert hat
  • Wunsch, die Statusverwaltungslogik vollständig von der UI-Schicht zu isolieren
  • Verteilen der Statusverwaltungslogik auf verschiedene UI-Ebenen
  • Verwenden der Middleware-Funktionen zum Implementieren zusätzlicher Logik beim Initialisieren von Vorgängen
  • Die Fähigkeit, bestimmte Teile des Staates zu retten
  • Möglichkeit, reproduzierbare Fehlerberichte zu erhalten
  • Möglichkeit zum schnellen Debuggen von Logik und Benutzeroberfläche während der Entwicklung
  
  
  
• Redux + React-Redux
  
  
  • Alle Anwendungsfälle für Redux + die Fähigkeit von React-Komponenten, mit dem Redux-Speicher zu interagieren
  
  
  

Noch einmal: Die genannten Tools lösen verschiedene Probleme!

Empfehlungen

Wie entscheiden Sie, was Sie verwenden möchten?



Dazu müssen Sie nur ermitteln, welches Tool die Probleme Ihrer Anwendung am besten löst.

• Wenn Sie nur "Bohren" vermeiden möchten, verwenden Sie den Kontext
• , , + useReducer()
• , , .., Redux + React-Redux

Ich glaube, wenn Ihre Anwendung 2-3 Kontexte zum Verwalten des Status hat, sollten Sie zu Redux wechseln.



Sie werden oft hören, dass „bei der Verwendung von Redux viel Code für das Boilerplate geschrieben werden muss“. „Modernes Redux“ erleichtert jedoch das Erlernen und Verwenden erheblich. Das offizielle Redux Toolkit löst das Template-Problem und die React-Redux- Haken erleichtern die Verwendung von Redux in React-Komponenten.



Das Hinzufügen von RTK und React-Redux als Abhängigkeiten erhöht natürlich das Anwendungspaket über den integrierten Kontext + useReducer (). Die Vorteile dieses Ansatzes decken jedoch die Nachteile ab - bessere Zustandsverfolgung, einfachere und vorhersagbarere Logik, verbesserte Optimierung der Komponentenwiedergabe.



Es ist auch wichtig zu beachten, dass das eine das andere nicht ausschließt - Sie können Redux, Context und useReducer () zusammen verwenden. Wir empfehlen, den "globalen" Status in Redux und den lokalen Status in Komponenten zu speichern und vorsichtig zu sein, wenn Sie festlegen, welcher Teil der Anwendung in Redux und welcher in Komponenten gespeichert werden soll.... Sie können also Redux zum Speichern des globalen Status, Context + useReducer () zum Speichern des lokalen Status und Context zum Speichern statischer Werte gleichzeitig in derselben Anwendung verwenden.



Noch einmal, ich argumentiere nicht, dass der gesamte Anwendungsstatus in Redux gespeichert werden sollte oder dass Redux immer die beste Lösung ist. Mein Punkt ist, dass Redux eine gute Wahl ist, es gibt viele Gründe, Redux zu verwenden, und die Gebühren für die Verwendung sind nicht so hoch, wie viele denken.



Schließlich sind Kontext und Redux nicht einzigartig. Es gibt viele andere Instrumente, die sich mit anderen Aspekten des Staatsmanagements befassen. MobX ist eine beliebte Lösung, die OOP und Observables verwendet, um Abhängigkeiten automatisch zu aktualisieren. Andere Ansätze zur Erneuerung des Staates sind Jotai, Recoil und Zustand. Datenbibliotheken wie React Query, SWR, Apollo und Urql bieten Abstraktionen, die die Verwendung allgemeiner Muster für die Arbeit mit dem vom Server zwischengespeicherten Status vereinfachen (eine ähnliche Bibliothek ( RTK Query ) wird in Kürze für das Redux Toolkit angezeigt ).



Ich hoffe, dieser Artikel hat Ihnen geholfen, den Unterschied zwischen Kontext und Redux zu verstehen und welches Tool wann verwendet werden sollte. Danke für die Aufmerksamkeit.