2016-05-01 10 views
11

Ich verwende React, Redux seit einigen Monaten. Einer der verwirrendsten Teile des Ökosystems ist der asynchrone Datenfluss. Es gibt viele großartige Lösungen zur Verfügung und die Wahl der richtigen Lösung für Ihr Problem ist der schwierige Teil.Was sind die Unterschiede zwischen Redux-Thunk und Redux-Promise bei Verwendung mit Axios apis?

In meiner Anwendung haben die Aktion Schöpfer meist Async axios [Ajax] Anrufe an meine Back-End-API. Das Injizieren von Redux-Promise als Middleware behebt das Problem des asynchronen Datenflusses.

In Anbetracht der skalierbaren App muss ich möglicherweise mehrere Axios-Aufrufe in meinem Aktionsersteller verketten. Ich denke, ich kann Redux-Promise immer noch als Middleware verwenden und das würde in meiner App für asynchronen Datenfluss sorgen.

Im Allgemeinen ist das Team eher geneigt, Redux-Thunk zu verwenden, was ich für dieses Problem komplizierter finde. Ich brauche Vorschläge zur Bewertung dieser 2 Frameworks, da die meisten meiner Actions nur Axios Calls (Versprechungen) machen. Ich habe eine Menge Diskussion über Redux-Thunk here gesehen. Ich habe verstanden, wie Thunk nützlich sein kann. . Aber ich brauche mehr Klärung, Redux-Versprechen und Redux-Thunk zusammen zu bewerten, wenn nur für Versprechen verwendet. Welche Middleware ist in einer solchen Situation besser und warum? Welche Vorteile habe ich mit Redux-Thunk gegenüber Redux-Promise? Oder gibt es keine?

Antwort

19

Mit Redux Promise können Sie drei Aktionen (Anfrage, Erfolg, Fehler) absetzen, ohne diesen Code manuell zu schreiben.

Redux Thunk ist praktisch für asynchronen Datenfluss, wenn Sie einen Aktionsersteller so ausdrücken, dass er auf einen anderen Aktionsersteller wartet. Außerdem können Sie den aktuellen Status für bedingte Absendungen und frühe Rettungsaktionen lesen.

Sie können sie zusammen verwenden oder eine bestimmte verwenden. Ich würde empfehlen, mit Redux Thunk zu beginnen, da es mehr Kontrolle bietet und vielseitiger ist. Nachdem Sie es funktioniert haben, können Sie hinzufügen, das Redux-Versprechen hinzufügt, um einen Teil des Boilerplate-Codes zu entfernen, der zu dem Verteilen von drei Arten von Aktionen verwandt wird. Wenn Sie feststellen, dass es Sie nicht viel kauft, entfernen Sie es. Auf der anderen Seite können Sie Redux Thunk entfernen, wenn Sie bemerken, dass alle Thunk-Action-Ersteller nur ein einziges Versprechen versenden.

Wenn dies immer noch verwirrend ist, empfehle ich, Redux Thunk zu verwenden, bis Sie mit der Funktionsweise der Middleware vertrauter sind.

+1

Danke für die Klarstellung. Wie Sie bereits erwähnt haben, senden Action-Creators bisher nur einzelne Versprechen und somit erscheint Redux-Promise als ausreichende Lösung. Aber wenn Sie über Redux-Thunk sprechen, das mehr Kontrolle bietet, meinen Sie, dass es Ihnen eine Möglichkeit gibt, auf den Status zuzugreifen und auch Aktionen zu versenden, wenn wir sie brauchen? –

+0

@DishantSoni Ja, genau. –

+0

@DanAbramov können Sie ein Beispiel zum Rendern einiger Daten auf der Seite zeigen? Ich habe und Endpunkt, aber kann es nicht zum Funktionieren bringen. Hier ist ein Beispiel für das, was ich versuche zu tun [link] (https://gist.github.com/anthonybrown/5d5676718161a4a757c55329714be46) –

Verwandte Themen