J'ai l'impression qu'aucune des réponses n'a cristallisé pourquoi mapDispatchToProps
est utile.
Cela ne peut vraiment être répondu que dans le contexte du container-component
modèle, que j'ai trouvé le mieux compris en première lecture: Composants de conteneur puis Utilisation avec React .
En un mot, vous components
êtes censé ne vous soucier que d'afficher des choses. Le seul endroit où ils sont censés obtenir des informations est leurs accessoires .
Séparé de "l'affichage des éléments" (composants) est:
- comment afficher les éléments,
- et comment vous gérez les événements.
C'est pour ça containers
.
Par conséquent, un "bien conçu" component
dans le modèle ressemble à ceci:
class FancyAlerter extends Component {
sendAlert = () => {
this.props.sendTheAlert()
}
render() {
<div>
<h1>Today's Fancy Alert is {this.props.fancyInfo}</h1>
<Button onClick={sendAlert}/>
</div>
}
}
Voyez comment ce composant obtient l'information qu'il affiche d'accessoires (qui est venu du magasin redux via mapStateToProps
) et il obtient également sa fonction d'action de ses accessoires: sendTheAlert()
.
C'est là mapDispatchToProps
qu'intervient: dans le correspondantcontainer
// 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
)
Je me demande si vous pouvez voir, maintenant que c'est le container
1 qui connaît le redux et l'expédition et le stockage et l'état et ... des trucs.
Le component
dans le motif, FancyAlerter
qui fait le rendu, n'a pas besoin de savoir quoi que ce soit: il obtient sa méthode pour appeler onClick
du bouton, via ses accessoires.
Et ... mapDispatchToProps
était le moyen utile que redux fournit pour laisser le conteneur passer facilement cette fonction dans le composant enveloppé sur ses accessoires.
Tout cela ressemble beaucoup à l'exemple des tâches dans les documents, et une autre réponse ici, mais j'ai essayé de le lancer à la lumière du motif pour souligner pourquoi .
(Remarque: vous ne pouvez pas utiliser mapStateToProps
dans le même but que mapDispatchToProps
pour la raison fondamentale pour laquelle vous n'avez pas accès à l' dispatch
intérieur mapStateToProp
. Vous ne pouvez donc pas utiliser mapStateToProps
pour donner au composant encapsulé une méthode qui utilise dispatch
.
Je ne sais pas pourquoi ils ont choisi de le diviser en deux fonctions de mappage - il aurait peut-être été plus judicieux d'avoir mapToProps(state, dispatch, props)
IE une fonction pour faire les deux!
1 Notez que j'ai délibérément explicitement nommé le conteneur FancyButtonContainer
, pour souligner qu'il s'agit d'une «chose» - l'identité (et donc l'existence!) Du conteneur en tant que «chose» est parfois perdue dans la sténographie
export default connect(...)
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
syntaxe indiquée dans la plupart des exemples
ALERT_ACTION
est-ce la fonction d'action ou celletype
qui est renvoyée par la fonction d'action? : / so baffedC'est essentiellement un raccourci. Donc au lieu d'avoir à écrire:
Vous utiliseriez mapDispatchToProps comme indiqué dans votre exemple de code, puis écrivez ailleurs:
ou plus probablement dans ce cas, vous auriez cela en tant que gestionnaire d'événements:
Il y a une vidéo utile de Dan Abramov à ce sujet ici: https://egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolist
la source
mapDispatch
fonction, Redux utilisera une fonction par défaut. CettemapDispatch
fonction par défaut prend simplement ladispatch
référence de la fonction et vous la donne en tant quethis.props.dispatch
.mapStateToProps()
est un utilitaire qui aide votre composant à obtenir un état mis à jour (qui est mis à jour par d'autres composants),mapDispatchToProps()
est un utilitaire qui aidera votre composant à déclencher un événement d'action (action de répartition qui peut provoquer un changement d'état de l'application)la source
mapStateToProps
,mapDispatchToProps
Etconnect
de lareact-redux
bibliothèque offre un moyen pratique d'accéder à votrestate
etdispatch
fonction de votre magasin. Donc, fondamentalement, la connexion est un composant d'ordre supérieur, vous pouvez également penser comme un wrapper si cela vous convient. Ainsi, chaque fois que votrestate
modificationmapStateToProps
sera appelée avec votre nouveaustate
et par la suite, lors de laprops
mise à jour, le composant exécutera la fonction de rendu pour rendre votre composant dans le navigateur.mapDispatchToProps
stocke également les valeurs-clés sur leprops
composant, généralement elles prennent la forme d'une fonction. De cette façon, vous pouvez déclencher desstate
modifications à partir de votre composantonClick
, lesonChange
événements.Depuis les documents:
Assurez-vous également que vous connaissez les fonctions sans état React et les composants d'ordre supérieur
la source
mapStateToProps
reçoit lestate
etprops
et vous permet d'extraire les accessoires de l'état à passer au composant.mapDispatchToProps
reçoitdispatch
etprops
est destiné à vous de lier les créateurs d'actions à la répartition. Ainsi, lorsque vous exécutez la fonction résultante, l'action est distribuée.Je trouve que cela vous évite d'avoir à faire
dispatch(actionCreator())
dans votre composant, ce qui le rend un peu plus facile à lire.https://github.com/reactjs/react-redux/blob/master/docs/api.md#arguments
la source
dispatch
méthode? D'où est ce que ça vient?<Provider/>
lui - même. Il fait sa propre magie de composants de haut niveau afin de garantir que la répartition est disponible dans ses composants enfants.Supposons maintenant qu'il existe une action pour redux comme:
Lorsque vous l'importez,
Comme le nom de la fonction le dit
mapDispatchToProps()
, mappez l'dispatch
action sur les accessoires (les accessoires de notre composant)L'hélice
onTodoClick
est donc une clé demapDispatchToProps
fonctionnement que les délégués doivent achemineraddTodo
.Aussi, si vous souhaitez couper le code et contourner l'implémentation manuelle, vous pouvez le faire,
Ce qui signifie exactement
la source