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?
Antworten:
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 diesReduxermö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
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:
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.
Die einzigen Gründe, Redux für mich zu verwenden, sind:
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.
- 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.
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.