Qu’est-ce que mapDispatchToProps?

Je lisais la documentation de la bibliothèque Redux et elle a cet exemple,

En plus de lire l’état, les composants du conteneur peuvent dissortingbuer des actions. De la même manière, vous pouvez définir une fonction appelée mapDispatchToProps() qui reçoit la méthode dispatch () et renvoie les accessoires de rappel que vous souhaitez injecter dans le composant de présentation.

Cela n’a aucun sens. Pourquoi avez-vous besoin de mapDispatchToProps lorsque vous avez déjà mapStateToProps ?

Ils fournissent également cet exemple de code pratique:

 const mapDispatchToProps = (dispatch) => { return { onTodoClick: (id) => { dispatch(toggleTodo(id)) } } } 

Est-ce que quelqu’un peut expliquer en termes simples ce qu’est cette fonction et pourquoi elle est utile?

Je pense qu’aucune des réponses n’a été mapDispatchToProps pour lesquelles mapDispatchToProps est utile.

Cela ne peut vraiment être répondu que dans le contexte du modèle de container-component , que j’ai trouvé mieux compris en première lecture:

https://medium.com/@learnreact/container-components-c0e67432e005#.1a9j3w1jl

puis

http://redux.js.org/docs/basics/UsageWithReact.html

En bref, vos components sont censés ne concerner que l’affichage de choses. Le seul endroit où ils sont censés obtenir des informations est leurs accessoires .

Séparé de “afficher des choses” (composants) est:

  • comment vous obtenez les choses à afficher,
  • et comment vous gérez les événements.

C’est à quoi servent les containers .

Par conséquent, un component “bien conçu” dans le motif ressemble à ceci:

 class FancyAlerter extends Component { sendAlert = () => { this.props.sendTheAlert() } render() { 

Today's Fancy Alert is {this.props.fancyInfo}

} }

Voyez comment ce composant obtient les informations mapStateToProps par props (provenant du magasin redux via mapStateToProps ) et obtient sa fonction d’action à partir de ses accessoires: sendTheAlert() .

C’est là mapDispatchToProps : dans le container correspondant

 // FancyButtonContainer.js function mapDispatchToProps(dispatch) { return({ sendTheAlert: () => {dispatch(ALERT_ACTION)} }) } function mapStateToProps(state} { return({fancyInfo: "Fancy this:" + state.currentFunnySsortingng}) } 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’envoi et le stockage et l’état et … les choses.

Le component dans le pattern, FancyAlerter , qui n’a pas besoin de connaître le rendu: il a sa méthode pour appeler à onClick du bouton, via ses accessoires.

Et … mapDispatchToProps était le moyen utile que redux fournit pour permettre au conteneur de passer facilement cette fonction dans le composant enveloppé sur ses accessoires.

Tout cela ressemble beaucoup à l’exemple de todo dans docs, et une autre réponse ici, mais j’ai essayé de la jeter à la lumière du modèle pour souligner pourquoi .

(Remarque: vous ne pouvez pas utiliser mapStateToProps au même titre que mapDispatchToProps pour la raison fondamentale pour laquelle vous n’avez pas access à dispatch dans mapStateToProp . Vous ne pouvez donc pas utiliser mapStateToProps pour donner au composant mapStateToProps une méthode utilisant dispatch .

Je ne sais pas pourquoi ils ont choisi de le diviser en deux fonctions de mappage – il aurait peut-être été plus simple d’avoir mapToProps(state, dispatch, props) une seule fonction pour faire les deux!


[1] Notez que j’ai délibérément nommé le conteneur FancyButtonContainer , pour souligner qu’il s’agit d’une “chose” – l’identité (et donc l’existence!) FancyButtonContainer conteneur en tant que “chose” est parfois perdue dans la sténographie

export default connect(...)

la syntaxe qui est montrée dans la plupart des exemples

C’est essentiellement une sténographie. Donc, au lieu d’avoir à écrire:

 this.props.dispatch(toggleTodo(id)); 

Vous utiliseriez mapDispatchToProps comme indiqué dans votre exemple de code, puis écrivez ailleurs:

 this.props.onTodoClick(id); 

ou plus probable dans ce cas, vous auriez cela comme gestionnaire d’événement:

  

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

mapStateToProps() est un utilitaire qui aide votre composant à obtenir l’é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 pouvant entraîner un changement d’état de l’application)

mapStateToProps , mapDispatchToProps et connect de la bibliothèque mapDispatchToProps react-redux offre un moyen pratique d’accéder à votre fonction d’ state et de dispatch de votre magasin. Donc, fondamentalement, connect est un composant d’ordre supérieur, vous pouvez aussi faire comme un wrapper si cela a du sens pour vous. Ainsi, chaque fois que votre state est modifié, mapStateToProps sera appelé avec votre nouvel state et, par la suite, lorsque le composant de mise à jour des propriétés sera exécuté, la fonction de rendu restituera votre composant dans le navigateur. mapDispatchToProps stocke également des valeurs-clés sur les props de votre composant, généralement sous la forme d’une fonction. De cette manière, vous pouvez déclencher state changement d’ state partir de votre composant onClick , onClick .

De docs:

 const TodoListComponent = ({ todos, onTodoClick }) => ( 
    {todos.map(todo => onTodoClick(todo.id)} /> )}
) const mapStateToProps = (state) => { return { todos: getVisibleTodos(state.todos, state.visibilityFilter) } } const mapDispatchToProps = (dispatch) => { return { onTodoClick: (id) => { dispatch(toggleTodo(id)) } } } function toggleTodo(index) { return { type: TOGGLE_TODO, index } } const TodoList = connect( mapStateToProps, mapDispatchToProps )(TodoList)

Assurez-vous également que vous connaissez bien les fonctions sans état et les composants d’ordre supérieur.

mapStateToProps reçoit l’ state et les props et vous permet d’extraire des accessoires de l’état pour les transmettre au composant.

mapDispatchToProps reçoit les dispatch et les props et est destiné à vous permettre de lier les créateurs d’action lorsque vous exécutez la fonction qui en résulte, l’action est envoyée.

Je trouve que cela vous évite d’avoir à faire de la dispatch(actionCreator()) au sein de votre composant, ce qui le rend un peu plus facile à lire.

https://github.com/reactjs/react-redux/blob/master/docs/api.md#arguments