Ich habe das Gefühl, dass keine der Antworten herauskristallisiert hat, warum dies mapDispatchToProps
nützlich ist.
Dies kann wirklich nur im Kontext des container-component
Musters beantwortet werden , das ich am besten verstanden habe, indem ich zuerst gelesen habe: Containerkomponenten, dann Verwendung mit Reagieren .
Kurz gesagt, Sie components
sollten sich nur mit dem Anzeigen von Dingen befassen. Der einzige Ort, an dem sie Informationen erhalten sollen, sind ihre Requisiten .
Getrennt von "Anzeigen von Sachen" (Komponenten) ist:
- wie du das Zeug zum Anzeigen bringst,
- und wie Sie mit Ereignissen umgehen.
Dafür containers
sind da.
Daher component
sieht ein "gut gestaltetes" Muster so aus:
class FancyAlerter extends Component {
sendAlert = () => {
this.props.sendTheAlert()
}
render() {
<div>
<h1>Today's Fancy Alert is {this.props.fancyInfo}</h1>
<Button onClick={sendAlert}/>
</div>
}
}
Sehen Sie, wie diese Komponente die Informationen erhält, die sie von Requisiten anzeigt (die über aus dem Redux-Store kamen mapStateToProps
), und wie sie ihre Aktionsfunktion von ihren Requisiten erhält : sendTheAlert()
.
Hier mapDispatchToProps
kommt es ins Spiel: im entsprechendencontainer
// FancyButtonContainer.js
function mapDispatchToProps(dispatch) {
return({
sendTheAlert: () => {dispatch(ALERT_ACTION)}
})
}
function mapStateToProps(state) {
return({fancyInfo: "Fancy this:" + state.currentFunnyString})
}
export const FancyButtonContainer = connect(
mapStateToProps, mapDispatchToProps)(
FancyAlerter
)
Ich frage mich, ob Sie sehen können, jetzt, wo es die container
1 ist , die über Redux und Versand und Lagerung und Zustand und ... Zeug Bescheid weiß.
Das component
in dem Muster, FancyAlerter
das das Rendern ausführt, muss nichts davon wissen: Es erhält seine Methode onClick
, um über seine Requisiten auf die Schaltfläche zuzugreifen.
Und ... mapDispatchToProps
war das nützliche Mittel, das Redux bietet, damit der Container diese Funktion problemlos an die verpackte Komponente seiner Requisiten weitergeben kann.
All dies sieht dem ToDo-Beispiel in den Dokumenten und einer weiteren Antwort hier sehr ähnlich, aber ich habe versucht, es im Lichte des Musters zu werfen, um zu betonen, warum .
(Hinweis: Sie können nicht mapStateToProps
für den gleichen Zweck wie mapDispatchToProps
die wesentlichen Grund dafür , dass Sie keinen Zugriff auf dispatch
innen , mapStateToProp
damit Sie nicht benutzen können. mapStateToProps
Der umwickelten Komponente zu geben , ein Verfahren , dass Verwendungen dispatch
.
Ich weiß nicht, warum sie es in zwei Mapping-Funktionen unterteilt haben - es wäre vielleicht ordentlicher gewesen, wenn mapToProps(state, dispatch, props)
IE eine Funktion für beide Funktionen hätte!
1 Beachten Sie, dass ich den Container absichtlich explizit benannt habe FancyButtonContainer
, um hervorzuheben, dass es sich um ein "Ding" handelt - die Identität (und damit die Existenz!) Des Containers als "Ding" geht manchmal in der Kurzform verloren
export default connect(...)
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
Syntax, die in den meisten Beispielen gezeigt wird
ALERT_ACTION
Ist das die Aktionsfunktion oder dietype
, die von der Aktionsfunktion zurückgegeben wird? : / so verblüfftEs ist im Grunde eine Abkürzung. Also anstatt schreiben zu müssen:
Sie würden mapDispatchToProps wie in Ihrem Beispielcode gezeigt verwenden und dann an anderer Stelle schreiben:
oder wahrscheinlicher in diesem Fall hätten Sie das als Ereignishandler:
Hier gibt es ein hilfreiches Video von Dan Abramov: https://egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolist
quelle
mapDispatch
Funktion bereitstellen , verwendet Redux eine Standardeinstellung. Diese StandardfunktionmapDispatch
nimmt einfach diedispatch
Funktionsreferenz und gibt sie Ihnen alsthis.props.dispatch
.mapStateToProps()
ist ein Dienstprogramm, mit dem Ihre Komponente den aktualisierten Status erhält (der von einigen anderen Komponenten aktualisiert wird). EsmapDispatchToProps()
ist ein Dienstprogramm, mit dem Ihre Komponente ein Aktionsereignis auslösen kann (Auslösen einer Aktion, die zu einer Änderung des Anwendungsstatus führen kann).quelle
mapStateToProps
,mapDispatchToProps
Undconnect
vonreact-redux
Bibliothek bietet eine bequeme Möglichkeit für den Zugriff auf Ihrestate
unddispatch
Funktion Ihres Shops. Im Grunde genommen ist connect eine Komponente höherer Ordnung. Sie können auch als Wrapper denken, wenn dies für Sie sinnvoll ist. Jedes Mal, wenn Ihrestate
Änderung geändertmapStateToProps
wird, wird sie mit Ihrer neuen aufgerufen.state
Anschließend wird beimprops
Aktualisieren der Komponente die Renderfunktion ausgeführt, um Ihre Komponente im Browser zu rendern.mapDispatchToProps
speichert auch Schlüsselwerte auf derprops
Ihrer Komponente, normalerweise haben sie die Form einer Funktion. Auf diese Weise können Siestate
Änderungen an Ihrer Komponente auslösenonClick
.onChange
Ereignissen .Aus Dokumenten:
Stellen Sie außerdem sicher, dass Sie mit den Funktionen Statuslos reagieren und Komponenten höherer Ordnung vertraut sind
quelle
mapStateToProps
empfängt dasstate
undprops
und ermöglicht es Ihnen, Requisiten aus dem Status zu extrahieren, um sie an die Komponente zu übergeben.mapDispatchToProps
empfängtdispatch
undprops
und ist dazu gedacht, dass Sie Aktionsersteller an den Versand binden. Wenn Sie also die resultierende Funktion ausführen, wird die Aktion gesendet.Ich finde, dies erspart Ihnen nur die Notwendigkeit,
dispatch(actionCreator())
innerhalb Ihrer Komponente zu arbeiten, wodurch es ein bisschen einfacher zu lesen ist.https://github.com/reactjs/react-redux/blob/master/docs/api.md#arguments
quelle
dispatch
Methode? Woher kommt das?<Provider/>
selbst bereitgestellten Verbesserung . Es macht seine eigene Magie von Komponenten höherer Ordnung, um sicherzustellen, dass der Versand in seinen untergeordneten Komponenten verfügbar ist.Angenommen, es gibt eine Aktion für Redux als:
Wenn Sie es importieren,
Wie der Funktionsname sagt
mapDispatchToProps()
, Kartedispatch
Aktion den Requisiten zu (den Requisiten unserer Komponente).Prop
onTodoClick
ist also einmapDispatchToProps
Funktionsschlüssel, der die Weiterleitung von Versandaktionen delegiertaddTodo
.Auch wenn Sie den Code kürzen und die manuelle Implementierung umgehen möchten, können Sie dies tun:
Was genau bedeutet
quelle