React Context vs React Redux, wann sollte ich jeden verwenden? [geschlossen]

185

React 16.3.0 wurde veröffentlicht und die Kontext- API ist keine experimentelle Funktion mehr. Dan Abramov (der Schöpfer von Redux) schrieb einen guten Kommentar hier darüber, aber es war 2 Jahre als Kontext noch eine experimentelle Funktion.

Meine Frage ist Ihrer Meinung nach / Erfahrung, wann ich React Context über React Redux verwenden soll und umgekehrt?

javascript reactjs redux react-redux react-context Alfrex92
quelle
Wenn Sie die Redux- und React Context-API vergleichen, möchten Sie nur die Variablen zwischen den Komponenten synchronisieren. Überprüfen Sie das duixnpm-Paket. Es ist nur ein einfacher State Manager mit Rückrufen, der wirklich einfach zu implementieren ist. Um ganz klar zu sein: Ich bin der Schöpfer.
Broda Noel

Antworten:

206

Da Context keine experimentelle Funktion mehr ist und Sie Context direkt in Ihrer Anwendung verwenden können, eignet es sich hervorragend, um Daten an tief verschachtelte Komponenten weiterzugeben, für die sie entwickelt wurden.

Wie Mark Erikson in seinem Blog geschrieben hat :

Wenn Sie Redux nur verwenden, um die Weitergabe von Requisiten zu vermeiden, könnte der Kontext Redux ersetzen - aber dann haben Sie Redux wahrscheinlich überhaupt nicht benötigt.

Der Kontext bietet Ihnen auch nicht Redux DevToolsdie Möglichkeit, Ihre Statusaktualisierungen zu verfolgen, middlewareeine zentralisierte Anwendungslogik hinzuzufügen und andere leistungsstarke Funktionen, die dies Redux ermöglichen.

Reduxist viel leistungsfähiger und bietet eine große Anzahl von Funktionen, die Context Apidas nicht bietet, auch wie @danAbramov erwähnt

React Redux verwendet den Kontext intern, macht diese Tatsache jedoch in der öffentlichen API nicht sichtbar. Sie sollten sich also viel sicherer fühlen, wenn Sie den Kontext über React Redux verwenden, als direkt, denn wenn er sich ändert, liegt die Last für die Aktualisierung des Codes bei React Redux und nicht bei Ihnen.

Es liegt an Redux, die Implementierung tatsächlich zu aktualisieren, um sie an die neueste Kontext-API anzupassen

Die neueste Kontext-API kann für Anwendungen verwendet werden, bei denen Sie lediglich Redux verwenden würden, um Daten zwischen Komponenten zu übertragen. Anwendungen, die zentralisierte Daten verwenden und API-Anforderungen in Aktionserstellern verarbeiten, die Redux verwenden redux-thunkoder redux-saganoch benötigen, benötigen jedoch Redux. Abgesehen von diesem Redux sind weitere Bibliotheken zugeordnet, mit redux-persistdenen Sie Speicherdaten in localStorage speichern und beim Aktualisieren rehydrieren können. Dies wird von der Kontext-API immer noch nicht unterstützt.

Wie @dan_abramov in seinem Blog erwähnt hat, benötigen Sie möglicherweise kein Redux , dieses Redux hat eine nützliche Anwendung wie

  • Behalten Sie den Status in einem lokalen Speicher bei und starten Sie ihn sofort.
  • Füllen Sie den Status auf dem Server vorab aus, senden Sie ihn in HTML an den Client und starten Sie ihn sofort.
  • Serialisieren Sie Benutzeraktionen und hängen Sie sie zusammen mit einem Status-Snapshot an automatisierte Fehlerberichte an, damit die Produktentwickler sie erneut
    abspielen können, um die Fehler zu reproduzieren.
  • Übergeben Sie Aktionsobjekte über das Netzwerk, um kollaborative Umgebungen zu implementieren, ohne dass sich die Schreibweise des Codes dramatisch ändert.
  • Behalten Sie einen Rückgängig-Verlauf bei oder implementieren Sie optimistische Mutationen, ohne die Schreibweise des Codes dramatisch zu ändern.
  • Wechseln Sie zwischen dem Statusverlauf in der Entwicklung und bewerten Sie den aktuellen Status aus dem Aktionsverlauf neu, wenn sich der Code ändert, a la TDD.
  • Bieten Sie den Entwicklungswerkzeugen umfassende Inspektions- und Kontrollfunktionen, damit Produktentwickler benutzerdefinierte Tools für ihre
    Apps erstellen können .
  • Stellen Sie alternative Benutzeroberflächen bereit, während Sie den größten Teil der Geschäftslogik wiederverwenden.

Bei diesen vielen Anwendungen ist es viel zu früh zu sagen, dass Redux durch die neue Kontext-API ersetzt wird

Shubham Khatri
quelle
Ok, aber was ist mit Wiederverwendbarkeit? Die Kontexte sind vollständig wiederverwendbar, sobald Redux + Thunk und insbesondere Redux + Saga kaum wiederverwendbar sind.
Yurii Haiovyi
4
@Daggett Eine Sache, die wir verstehen müssen, ist, dass Redux kein Kontext ist, sondern auf dem Kontext aufgebaut ist. Der Speicher, den Sie haben, wird vom Kontext weitergegeben.
Können
Selbst die Entwicklung eines so grundlegenden Produkts wie eines Mehrwegbehälters mit Nebenwirkungen wird mit Redux zum Albtraum. Redux ist eng an die Anwendungsebene gebunden, und Sie können sagen, es ist immer noch wiederverwendbar usw. usw., aber wenn ich wiederverwendbar sage, meine ich, dass es vollständig wiederverwendbar ist ... Ohne Spaghetti von Spikes, die als separates Paket erstellt wurden und unabhängig von der Anwendungseinrichtung wiederverwendet werden können .
Yurii Haiovyi
@YuriiHaiovyi Ich stimme Ihren Fragen zu. Diese Antwort ist im Grunde eine kompilierte Version dessen, was die verlinkten Blog-Beiträge sagen. Nichts über das Teilen der eigenen Perspektive, als hätte ich nur den Kontext verwendet, und dann blieb ich stecken und hielt es aus einigen x-, y-, z-Gründen für eine schlechte Wahl und wechselte dann zu Redux, Mobx, das es löste ... oder umgekehrt Geschichte zum Beispiel. Hauptsächlich fragen oder suchen die Leute danach, ob es schlechte oder gute Geschichten gibt, die den Lesern helfen können, nachzudenken und kalkulierte Entscheidungen zu treffen ... Also meine Frage, welchen Weg Sie wählen?
Arup Rakshit
4
Welcher Teil von Redux ist nicht wiederverwendbar? Sie können Reduzierungen, Selektoren, Aktionen und Aktionsersteller in einer anderen Anwendung mit Redux problemlos wiederverwenden (reagieren, sogar eckig).
Dávid Molnár
85

Wenn Sie Redux nur verwenden, um zu vermeiden, dass Requisiten an tief verschachtelte Komponenten weitergegeben werden , können Sie Redux durch die ContextAPI ersetzen . Es ist genau für diesen Anwendungsfall vorgesehen.

Auf der anderen Seite, wenn Sie Redux für alles andere verwenden (einen vorhersehbaren Statuscontainer haben, die Logik Ihrer Anwendung außerhalb Ihrer Komponenten behandeln, den Status Ihrer Anwendung zentralisieren, verwenden Statuscontainer haben , Redux DevTools verfolgen, wann, wo, warum und wie der Status Ihrer Anwendung ist Wenn Sie Plugins wie Redux Form , Redux Saga , Redux Undo , Redux Persist , Redux Logger usw. verwenden, gibt es absolut keinen Grund für Sie, Redux aufzugeben. Die ContextAPI bietet nichts davon.

Und ich persönlich glaube, dass die Redux DevTools-Erweiterung ein erstaunliches, unterschätztes Debugging-Tool ist, das es für sich rechtfertigt, Redux weiterhin zu verwenden.

Einige Referenzen:

GG.
quelle
12

Ich bevorzuge die Verwendung von Redux mit Redux-Thunk zum Ausführen von API-Aufrufen (auch unter Verwendung von Axios) und zum Versenden der Antwort an Reduzierer. Es ist sauber und leicht zu verstehen.

Die Kontext-API ist sehr spezifisch für den React-Redux-Teil, wie React-Komponenten mit dem Store verbunden sind. Dafür ist React-Redux gut. Wenn Sie jedoch möchten, können Sie, da Context offiziell unterstützt wird, die Context-API anstelle von React-Redux verwenden.

Die Frage sollte also Kontext-API vs. React-Redux sein und nicht Kontext-API vs. Redux. Auch die Frage ist leicht meinungsbildend. Da ich mit React-Redux vertraut bin und es in allen Projekten verwende, werde ich es weiterhin verwenden. (Es gibt keinen Anreiz für mich, mich zu ändern).

Wenn Sie jedoch erst heute Redux lernen und es nirgendwo verwendet haben, lohnt es sich, die Kontext-API auszuprobieren und React-Redux durch Ihren benutzerdefinierten Kontext-API-Code zu ersetzen. Vielleicht ist es so viel sauberer.

Persönlich ist es eine Frage der Vertrautheit. Es gibt keinen klaren Grund, einen über den anderen zu wählen, weil sie gleichwertig sind. Und intern verwendet React-Redux sowieso Context.

vijayst
quelle
10

Die einzigen Gründe, Redux für mich zu verwenden, sind:

  • Sie möchten ein globales Statusobjekt (aus verschiedenen Gründen wie Debuggbarkeit, Persistenz ...)
  • Ihre App ist oder wird groß sein und sollte für viele Entwickler skalierbar sein: In diesem Fall benötigen Sie wahrscheinlich eine Indirektionsebene (dh ein Ereignissystem): Sie lösen Ereignisse (in der Vergangenheit) und dann Personen aus, die Sie in Ihrem nicht kennen Organisation kann ihnen tatsächlich zuhören

Sie benötigen wahrscheinlich nicht die Indirektionsebene für Ihre gesamte App, daher ist es in Ordnung, Stile zu mischen und gleichzeitig den lokalen Status / Kontext und Redux zu verwenden.

Sebastien Lorber
quelle
1
  • Wenn Sie Middleware für verschiedene Zwecke verwenden müssen.Zum Beispiel Protokollierungsaktionen, Fehlerberichterstattung, Versenden anderer Anforderungen in Abhängigkeit von der Antwort des Servers usw.
  • Wenn Daten, die von mehreren Endpunkten stammen, eine einzelne Komponente / Ansicht beeinflussen.
  • Wenn Sie mehr Kontrolle über Aktionen in Ihren Anwendungen haben möchten.Redux ermöglicht die Verfolgung von Aktionen und Datenänderungen und vereinfacht das Debuggen erheblich.
  • Wenn Sie nicht möchten, dass die Serverantwort den Status Ihrer Anwendung direkt ändert. Redux fügt eine Ebene hinzu, auf der Sie entscheiden können, wie, wann und ob diese Daten angewendet werden sollen. Das Beobachtermuster. Anstatt mehrere Publisher und Abonnenten in der gesamten App zu erstellen, verbinden Sie einfach Komponenten mit dem Redux Store.

Von: Wann wird Redux verwendet?

Michał Rejman
quelle