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 de conteneur peuvent envoyer des actions. De la même manière, vous pouvez définir une fonction appelée mapDispatchToProps()qui reçoit la dispatch()méthode et renvoie les accessoires de rappel que vous souhaitez injecter dans le composant de présentation.

Cela n'a en fait aucun sens. Pourquoi avez-vous besoin mapDispatchToPropsalors que vous en avez déjà mapStateToProps?

Ils fournissent également cet exemple de code pratique:

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

Quelqu'un peut-il expliquer en termes simples ce qu'est cette fonction et pourquoi elle est utile?

J'ai l'impression qu'aucune des réponses n'a cristallisé pourquoi mapDispatchToPropsest utile.

Cela ne peut vraiment être répondu que dans le contexte du container-componentmodè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" componentdans 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à mapDispatchToPropsqu'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 componentdans le motif, FancyAlerterqui fait le rendu, n'a pas besoin de savoir quoi que ce soit: il obtient sa méthode pour appeler onClickdu 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 mapStateToPropsdans le même but que mapDispatchToPropspour la raison fondamentale pour laquelle vous n'avez pas accès à l' dispatchintérieur mapStateToProp. Vous ne pouvez donc pas utiliser mapStateToPropspour 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

C'est essentiellement un raccourci. 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 probablement dans ce cas, vous auriez cela en tant que gestionnaire d'événements:

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

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 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)

mapStateToProps, mapDispatchToPropsEt connectde la react-reduxbibliothèque offre un moyen pratique d'accéder à votre stateet dispatchfonction 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 votre statemodification mapStateToPropssera appelée avec votre nouveau stateet par la suite, lors de la propsmise à jour, le composant exécutera la fonction de rendu pour rendre votre composant dans le navigateur. mapDispatchToPropsstocke également les valeurs-clés sur le propscomposant, généralement elles prennent la forme d'une fonction. De cette façon, vous pouvez déclencher des statemodifications à partir de votre composant onClick, les onChangeévénements.

Depuis les documents:

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 connaissez les fonctions sans état React et les composants d'ordre supérieur

mapStateToPropsreçoit le stateet propset vous permet d'extraire les accessoires de l'état à passer au composant.

mapDispatchToPropsreçoit dispatchet propsest 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

Supposons maintenant qu'il existe une action pour redux comme:

export function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

Lorsque vous l'importez,

import {addTodo} from './actions';

class Greeting extends React.Component {

    handleOnClick = () => {
        this.props.onTodoClick(); // This prop acts as key to callback prop for mapDispatchToProps
    }

    render() {
        return <button onClick={this.handleOnClick}>Hello Redux</button>;
    }
}

const mapDispatchToProps = dispatch => {
    return {
      onTodoClick: () => { // handles onTodoClick prop's call here
        dispatch(addTodo())
      }
    }
}

export default connect(
    null,
    mapDispatchToProps
)(Greeting);

Comme le nom de la fonction le dit mapDispatchToProps(), mappez l' dispatchaction sur les accessoires (les accessoires de notre composant)

L'hélice onTodoClickest donc une clé de mapDispatchToPropsfonctionnement que les délégués doivent acheminer addTodo.

Aussi, si vous souhaitez couper le code et contourner l'implémentation manuelle, vous pouvez le faire,

import {addTodo} from './actions';
class Greeting extends React.Component {

    handleOnClick = () => {
        this.props.addTodo();
    }

    render() {
        return <button onClick={this.handleOnClick}>Hello Redux</button>;
    }
}

export default connect(
    null,
    {addTodo}
)(Greeting);

Ce qui signifie exactement

const mapDispatchToProps = dispatch => {
    return {
      addTodo: () => { 
        dispatch(addTodo())
      }
    }
}