webentwicklung-frage-antwort-db.com.de

Was sind die Unterschiede zwischen Redux, React-Redux und Redux-Thunk?

Ich verwende React + Flux. Unser Team plant einen Wechsel von Flux zu Redux. Redux ist für mich sehr verwirrend, wenn ich aus der Fluxwelt komme. In flux ist der Flussfluss einfach aus Komponenten -> Aktionen -> Speichern und Speichern von Aktualisierungskomponenten. Es ist einfach und sehr klar.

Aber in Redux ist es verwirrend. Es gibt keinen Speicher hier, ja, es gibt einige Beispiele ohne Speicher. Ich habe mehrere Tutorials durchlaufen, es scheint, dass jeder seinen eigenen Implementierungsstil hat. Einige verwenden Container und andere nicht. (Ich kenne dieses Container-Konzept nicht und kann nicht verstehen, was mapStateToProps, mapDispatchToProps tut). 

  1. Kann jemand klar erklären, wie der Kontrollfluss bei Redux abläuft?
  2. Was sind Rollen von Komponenten/Containern/Aktionen/Aktionserstellern/Speichern in Redux?
  3. Unterschied zwischen Redux/React-Redux/Redux-Thunk/irgendwelchen anderen ?? 
  4. Es wäre sehr hilfreich, wenn Sie Links zu einfachen und präzisen redux-Tutorials posten können. 
36
  1. Kann jemand klar erklären, wie der Kontrollfluss bei Redux abläuft? Redux hat (immer) einen einzigen Laden.
  1. Wenn Sie den Status im Geschäft ersetzen möchten, lösen Sie eine Aktion aus. 

  2. Die Aktion wird von einem oder mehreren Reduzierern erfasst.

  3. Die Reduzierer erzeugen einen neuen Zustand, der den alten Zustand und die abgefahrene Aktion kombiniert.

  4. Die Ladenabonnenten werden benachrichtigt, dass ein neuer Status vorliegt.

  1. Was sind Rollen von Komponenten/Containern/Aktionen/Aktionserstellern/Speichern in Redux?
  • Store - hält den Status, und wenn eine neue Aktion eintrifft, wird die Dispatch -> Middleware -> Reduced-Pipeline ausgeführt und die Abonnenten benachrichtigt, wenn der Status durch einen neuen ersetzt wird.

  • Komponenten - stumme Ansichtsteile, die den Zustand nicht direkt kennen. Auch als Präsentationskomponenten bekannt.

  • Container - Teile der Ansicht, die den Status von React-Redux kennen. Auch als intelligente Komponenten und Komponenten höherer Ordnung bezeichnet


Beachten Sie, dass Container/intelligente Komponenten im Gegensatz zu dummen Komponenten nur eine gute Möglichkeit zum Strukturieren Ihrer App sind.


  • Aktionen - wie Flux - Befehlsmuster mit Typ und Nutzlast.

  • Aktionsersteller - DRY Art und Weise, Aktionen zu erstellen (nicht unbedingt erforderlich) 

  1. Unterschied zwischen Redux/React-Redux/Redux-Thunk/anderen?
  • redux - flow wie flow mit einem einzigen Speicher, der in jeder Umgebung verwendet werden kann, einschließlich Vanilla js, reagieren, eckig 1/2 usw.

  • Reakt-Redux - Bindungen zwischen Redux und React, das Container (intelligente Komponenten) erstellt, die die Zustandsänderungen des Speichers überwachen, die Requisiten für die Präsentationskomponenten (Dumb) vorbereiten und diese erneut erstellen.

  • redux-thunk - Middleware, mit der Sie Aktionsersteller schreiben können, die statt einer Aktion eine Funktion zurückgeben. Der Thunk kann verwendet werden, um den Versand einer Aktion zu verzögern oder nur dann zu versenden, wenn eine bestimmte Bedingung erfüllt ist. Wird hauptsächlich für asynchrone Aufrufe von APIs verwendet, die bei Erfolg/Misserfolg eine weitere Aktion auslösen.

  1. Es wäre sehr hilfreich, wenn Sie Links zu einem einfachen und genaue redux-Tutorials.
51
Ori Drori

Um Ihre Titelfrage zu beantworten:

Was sind die Unterschiede zwischen Redux, React-Redux und Redux-Thunk?

  1. redux: Hauptbibliothek (unabhängig von React) 
  2. redux-thunk: eine Redux-Middleware, die Ihnen bei asynchronen Aktionen hilft
  3. react-Redux: verbindet Ihren Redux-Store mit ReactComponents
10
webdeb

das folgende Bild zeigt den Datenfluss in Redux: wie fließen die Daten durch Redux? Die Vorteile von Redux sind nachfolgend aufgeführt:

Vorhersagbarkeit des Ergebnisses - Da es immer eine Quelle der Wahrheit gibt, dh den Laden, gibt es keine Verwirrung darüber, wie der aktuelle Zustand mit Aktionen und anderem synchronisiert werden soll Teile der Anwendung. Wartbarkeit - Der Code wird einfacher zu warten, mit einem vorhersehbaren Ergebnis und einer strengen Struktur. Serverseitiges Rendern - Sie müssen nur den auf dem Server erstellten Speicher an den Client übergeben. Dies ist sehr nützlich für das anfängliche Rendern und bietet eine bessere Benutzererfahrung, da die Anwendungsleistung optimiert wird. Entwicklertools - Von Aktionen bis hin zu Statusänderungen können Entwickler alle Vorgänge in der Anwendung in Echtzeit verfolgen. Community und Ökosystem - Redux hat eine riesige Community, die es noch spannender macht, sie zu nutzen. Eine große Gemeinschaft talentierter Personen trägt zur Verbesserung der Bibliothek bei und entwickelt damit verschiedene Anwendungen. Einfaches Testen - Redux 'Code besteht hauptsächlich aus Funktionen, die klein, rein und isoliert sind. Dies macht den Code testbar und unabhängig. [Organisation] [2] - Redux legt genau fest, wie Code organisiert werden soll. Dadurch wird der Code konsistenter und einfacher, wenn ein Team damit arbeitet.

0
Ahmad Sadegh
  • redux: Bibliothek zum Verwalten des Anwendungsstatus. 
  • react-redux: Bibliothek zum Verwalten von React Anwendungsstatus. 
  • redux-thunk: eine Middleware zum Logging, Crash-Reporting, Gespräch mit einer asyn API, Routing usw.
0
sultan aslam