In Redux- Dokumenten für bindActionCreators heißt es:
Der einzige Anwendungsfall
bindActionCreators
besteht darin, dass Sie einige Aktionsersteller an eine Komponente weitergeben möchten, die Redux nicht kennt, und den Versand oder den Redux-Speicher nicht an diese übergeben möchten.
Was wäre ein Beispiel, wo bindActionCreators
verwendet / benötigt würde?
Welche Art von Komponente würde Redux nicht kennen ?
Was sind die Vor- und Nachteile beider Optionen?
//actionCreator
import * as actionCreators from './actionCreators'
function mapStateToProps(state) {
return {
posts: state.posts,
comments: state.comments
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(actionCreators, dispatch)
}
vs.
function mapStateToProps(state) {
return {
posts: state.posts,
comments: state.comments
}
}
function mapDispatchToProps(dispatch) {
return {
someCallback: (postId, index) => {
dispatch({
type: 'REMOVE_COMMENT',
postId,
index
})
}
}
}
quelle
#3
eine Abkürzung für Option#1
?mapDispatchToProps
:function
,object
und fehlt. Wie mit jedem Fallredux
undconnect
undaddDispatchToProps
zu der einfachen Komponente scheint übertrieben, wenn ich nur eine Requisite weitergeben kann. Aber soweit ich weiß, werden fast alle Fälle fürmapDispatch
Requisiten entweder Optionen sein#1
oder#3
in der Antwort erwähntIn 99% der Fälle wird es mit der React-Redux-
connect()
Funktion als Teil desmapDispatchToProps
Parameters verwendet. Es kann explizit in der vonmapDispatch
Ihnen bereitgestellten Funktion verwendet werden oder automatisch, wenn Sie die Kurzkurzsyntax des Objekts verwenden und ein Objekt voller Aktionsersteller an übergebenconnect
.Die Idee ist, dass durch das Vorbinden der Aktionsersteller die Komponente, an die Sie übergeben,
connect()
technisch "nicht weiß", dass sie verbunden ist - sie weiß nur, dass sie ausgeführt werden mussthis.props.someCallback()
. Wenn Sie dagegen keine Aktionsersteller gebunden und aufgerufen habenthis.props.dispatch(someActionCreator())
, "weiß" die Komponente jetzt, dass sie verbunden ist, weil sie erwartetprops.dispatch
, dass sie existiert.Ich habe einige Gedanken zu diesem Thema in meinem Blog-Beitrag Idiomatic Redux: Warum Action Creators verwenden? .
quelle
Ein vollständigeres Beispiel: Übergeben Sie ein Objekt voller Aktionsersteller, um eine Verbindung herzustellen:
quelle
Ich werde versuchen, die ursprünglichen Fragen zu beantworten ...
Smart & Dumb-Komponenten
In Ihrer ersten Frage fragen Sie im Grunde, warum überhaupt
bindActionCreators
benötigt wird und welche Art von Komponenten Redux nicht kennen sollten.Kurz gesagt, die Idee hier ist, dass Komponenten in intelligente (Container) und dumme (Präsentations-) Komponenten aufgeteilt werden sollten. Dumme Komponenten arbeiten auf der Basis, die man wissen muss. Ihre Seelenaufgabe ist es, gegebene Daten in HTML zu rendern und nicht mehr. Sie sollten sich des Innenlebens der Anwendung nicht bewusst sein. Sie können als die hauttiefe vordere Schicht Ihrer Anwendung angesehen werden.
Auf der anderen Seite sind intelligente Komponenten eine Art Klebstoff, der Daten für die dummen Komponenten aufbereitet und vorzugsweise kein HTML-Rendering ausführt.
Diese Art von Architektur fördert die lose Kopplung zwischen der UI-Schicht und der darunter liegenden Datenschicht. Dies ermöglicht wiederum das einfache Ersetzen einer der beiden Ebenen durch etwas anderes (dh ein neues Design der Benutzeroberfläche), wodurch die andere Ebene nicht beschädigt wird.
Um Ihre Frage zu beantworten: Dumme Komponenten sollten Redux (oder unnötige Implementierungsdetails der Datenschicht) nicht kennen, da wir sie möglicherweise in Zukunft durch etwas anderes ersetzen möchten.
Weitere Informationen zu diesem Konzept finden Sie im Redux-Handbuch und ausführlicher im Artikel Präsentations- und Containerkomponenten von Dan Abramov.
Welches Beispiel ist besser
Die zweite Frage betraf die Vor- und Nachteile der angegebenen Beispiele.
Im ersten Beispiel werden die Aktionsersteller in einer separaten
actionCreators
Datei / einem separaten Modul definiert, sodass sie an anderer Stelle wiederverwendet werden können. Es ist so ziemlich die Standardmethode zum Definieren von Aktionen. Ich sehe darin keine wirklichen Nachteile.Das zweite Beispiel definiert Aktionsersteller inline, was mehrere Nachteile hat:
consts
separat zu definieren , damit sie in Reduzierungen referenziert werden können -, wodurch die Wahrscheinlichkeit von Tippfehlern verringert wirdDas zweite Beispiel hat einen Vorteil gegenüber dem ersten - es ist schneller zu schreiben! Wenn Sie also keine größeren Pläne für Ihren Code haben, ist dies möglicherweise in Ordnung.
Ich hoffe, ich habe es geschafft, die Dinge ein bisschen zu klären ...
quelle
Mithilfe von
bindActionCreators
kann es mehrere Aktionsfunktionen gruppieren und an eine Komponente weitergeben, die Redux (dumme Komponente) nicht so kenntquelle
Ich wollte auch mehr über bindActionsCreators erfahren und hier ist, wie ich es in meinem Projekt implementiert habe.
In Ihrer Reaktionskomponente
quelle
Eine mögliche Verwendung
bindActionCreators()
besteht darin, mehrere Aktionen als eine einzige Requisite zusammen "abzubilden".Ein normaler Versand sieht folgendermaßen aus:
Ordnen Sie Requisiten einige allgemeine Benutzeraktionen zu.
In größeren Projekten kann es sich unhandlich anfühlen, jeden Versand einzeln zuzuordnen. Wenn wir eine Reihe von Aktionen haben, die miteinander zusammenhängen, können wir diese Aktionen kombinieren . Zum Beispiel eine Benutzeraktionsdatei, die alle Arten von verschiedenen benutzerbezogenen Aktionen ausgeführt hat. Anstatt jede Aktion als separaten Versand aufzurufen, können wir
bindActionCreators()
stattdessen verwendendispatch
.Mehrfachversand mit bindActionCreators ()
Importieren Sie alle zugehörigen Aktionen. Sie befinden sich wahrscheinlich alle in derselben Datei im Redux-Speicher
Und jetzt, anstatt den Versand zu verwenden, verwenden Sie bindActionCreators ()
Jetzt kann ich die Requisite verwenden
userAction
, um alle Aktionen in Ihrer Komponente aufzurufen.IE:
userAction.login()
userAction.editEmail()
oderthis.props.userAction.login()
this.props.userAction.editEmail()
.HINWEIS: Sie müssen die bindActionCreators () nicht einer einzelnen Requisite zuordnen. (Die zusätzliche
=> {return {}}
, die zugeordnet istuserAction
). Sie können auchbindActionCreators()
alle Aktionen einer einzelnen Datei als separate Requisiten zuordnen. Aber ich finde das verwirrend. Ich bevorzuge es, jeder Aktion oder "Aktionsgruppe" einen expliziten Namen zu geben. Ich nenne das auch gerne,ownProps
um genauer zu beschreiben, was diese "Kinderrequisiten" sind oder woher sie kommen. Bei Verwendung von Redux + React kann es etwas verwirrend werden, wo alle Requisiten geliefert werden. Je aussagekräftiger, desto besser.quelle
Ein guter Anwendungsfall für
bindActionCreators
ist die Integration mit Redux-Saga unter Verwendung von Redux-Saga-Routinen . Beispielsweise:Beachten Sie, dass dieses Muster mithilfe von React Hooks (ab React 16.8) implementiert werden kann .
quelle
Die docs- Aussage ist sehr klar:
Dies ist eindeutig ein Anwendungsfall, der unter folgenden und nur einer Bedingung auftreten kann:
Nehmen wir an, wir haben die Komponenten A und B:
Injizieren, um zu reduzieren: (A)
Injiziert durch React-Redux: (B)
Haben Sie Folgendes bemerkt?
Wir haben den Redux-Speicher über die Komponente A aktualisiert, während uns der Redux-Speicher in Komponente B nicht bekannt war.
Wir aktualisieren nicht in Komponente A. Um genau zu wissen, was ich meine, können Sie diesen Beitrag untersuchen . Ich hoffe du hast eine Idee.
quelle