261 votes

Qu'est-ce que mapDispatchToProps?

J'ai été la lecture de la documentation pour le Redux bibliothèque et il a cet exemple,

En plus de la lecture de l'état, d'un conteneur de composants de répartition des actions. D'une manière similaire, vous pouvez définir une fonction nommée mapDispatchToProps() qui reçoit la méthode dispatch() et retourne rappel des accessoires que vous voulez injecter dans la présentation de la composante.

Cette réalité n'a pas de sens. Pourquoi avez-vous besoin d' mapDispatchToProps lorsque vous disposez déjà d' mapStateToProps?

Ils fournissent également cette pratique exemple de code:

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

Quelqu'un peut-il expliquer en termes vulgarisés ce que cette fonction est et pourquoi il est utile?

463voto

GreenAsJade Points 1729

Je me sens comme aucune des réponses ont cristallisé pourquoi mapDispatchToProps est utile.

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

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

alors

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

En un mot, votre components sont censés être concerné seulement avec l'affichage des trucs. Le seul endroit où ils sont censés obtenir des informations de leurs accessoires.

Séparé de "l'affichage des trucs" (composants):

  • comment vous obtenez les trucs à afficher,
  • et comment vous gérer les événements.

C'est ce qu' containers sont pour.

Par conséquent, un "bien conçu" component dans le modèle ressembler à 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>
     }
}

Voir comment ce composant reçoit l'info, il affiche d'accessoires (qui est venu de la redux store via l' mapStateToProps) et il obtient également son action en fonction de ses accessoires: sendTheAlert().

C'est là que mapDispatchToProps : dans l' container

// 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 le voir, maintenant que c'est l' container [1] qui connaît redux et de l'expédition et de la stocker et de l'état et ... des trucs.

L' component dans le modèle, FancyAlerter, ce qui ne le rendu n'a pas besoin de savoir à propos de ce genre de trucs: il obtient son méthode à appeler à l' onClick de la touche, par l'intermédiaire de ses accessoires.

Et ... mapDispatchToProps l'utile signifie que redux fournit pour que le conteneur de passer facilement à cette fonction dans le enveloppés composant sur ses accessoires.

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

(Remarque: vous ne pouvez pas utiliser mapStateToProps pour le même but que mapDispatchToProps pour la raison fondamentale que vous n'avez pas accès à l' dispatch à l'intérieur d' mapStateToProp. Donc, vous ne pouviez pas utiliser mapStateToProps pour donner le enveloppés composant une méthode qui utilise dispatch.

Je ne sais pas pourquoi ils ont choisi de le diviser en deux fonctions de cartographie - il aurait été plus propre d'avoir mapToProps(state, dispatch, props) c'est à dire une fonction pour faire les deux!


[1] Notez que j'ai volontairement explicitement nommé le conteneur FancyButtonContainer, pour mettre en évidence que c'est une "chose" - l'identité (et donc de l'existence!) du conteneur, comme une "chose" est parfois perdu dans le raccourci

export default connect(...)

la syntaxe qui est montré dans la plupart des exemples

60voto

hamstu Points 1149

En gros, c'est une abréviation. Donc au lieu d'avoir à écrire:

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

Vous utilisez mapDispatchToProps comme illustré dans l'exemple de code, et puis d'ailleurs écrire:

this.props.onTodoClick(id);

ou, plus probablement, dans ce cas, vous n'auriez que le gestionnaire d'événements:

<MyComponent onClick={this.props.onTodoClick} />

Il ya une vidéo utile par Dan Abramov sur ce sujet ici: https://egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolist

42voto

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 distribution susceptible de modifier l'état de l'application).

10voto

Vlad Filimon Points 334

mapStateToProps, mapDispatchToProps et connect de react-redux bibliothèque offre un moyen pratique d'accéder à votre state et dispatch fonction de votre magasin. Donc, fondamentalement, se connecter est une grande composante de l'ordre, vous pouvez également chose comme un wrapper si ce sens pour vous. Donc à chaque fois que votre state est changée mapStateToProps sera appelée avec votre nouveau state et par la suite comme vous l' props composant mise à jour sera exécutée fonction rendu pour rendre votre composant dans le navigateur. mapDispatchToProps stocke également les valeurs-clés sur l' props de votre composant, généralement ils prennent la forme d'une fonction. De cette façon, vous pouvez déclencher state changement de votre composant onClick, onChange événements.

De docs:

const TodoListComponent = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => onTodoClick(todo.id)}
      />
    )}
  </ul>
)

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 êtes familier avec Réagissent apatrides fonctions et d'Ordre Supérieur Composants

1voto

Harry Moreno Points 1254

mapStateToProps reçoit l' state et props et vous permet d'extraire les accessoires de l'état à passer au composant.

mapDispatchToProps reçoit dispatch et props et est destiné à vous lier d'action des créateurs à l'expédition ainsi, lorsque vous exécutez la fonction résultant de l'action distribué.

Je trouve ce seulement vous évite d'avoir à faire dispatch(actionCreator()) au sein de votre composante de ce fait en faisant un peu plus facile à lire.

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by: