Qu'est-ce que mapDispatchToProps ?

Question

Je lisais la documentation de la bibliothèque Redux et il y a cet exemple :

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

Cela n'a aucun sens. Pourquoi avez-vous besoin mapDispatchToProps alors que vous avez déjà mapStateToProps ?

Ils fournissent également cet exemple de code pratique :

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

En quoi consiste cette fonction et pourquoi elle est utile ?

Answer 1

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

On ne peut vraiment répondre à cette question que dans le cadre de l'enquête sur la santé des femmes. container-component que j'ai trouvé plus facile à comprendre à la première lecture : Composants du conteneur puis Utilisation avec React .

En un mot, votre components sont censés ne s'occuper que de l'affichage. Le site Le seul endroit où ils sont censés obtenir des informations est leur accessoire. .

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

• comment faire pour que le truc s'affiche,
• et comment vous gérez les événements.

C'est ce que containers sont pour.

Par conséquent, une "bonne conception" component dans le modèle ressemblent à 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 les informations qu'il affiche à partir de props (qui proviennent du magasin redux via mapStateToProps ) et il tire également sa fonction d'action de ses accessoires : sendTheAlert() .

C'est là que mapDispatchToProps entre en jeu : dans la rubrique correspondante 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 voir, maintenant que c'est le container 1 qui connaît redux, dispatch, store, state et ... des trucs.

El component dans le motif, FancyAlerter qui effectue le rendu n'a pas besoin d'être informé de tout cela : il obtient sa méthode à appeler à l'endroit suivant onClick du bouton, via ses props.

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

Tout cela ressemble beaucoup à l'exemple de todo dans la documentation, et à une autre réponse ici, mais j'ai essayé de l'adapter à la lumière du modèle pour mettre l'accent sur les points suivants pourquoi .

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

Je ne sais pas pourquoi ils ont choisi de le diviser en deux fonctions de cartographie. mapToProps(state, dispatch, props) IE : une seule fonction pour faire les deux !

---

1 Notez que j'ai délibérément nommé explicitement 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 qui est montrée dans la plupart des exemples

Answer 2

C'est en fait un raccourci. Donc au lieu d'avoir à écrire :

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

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

this.props.onTodoClick(id);

ou plus probablement dans ce cas, vous l'aurez comme gestionnaire d'événement :

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

---

Dan Abramov a réalisé une vidéo utile à ce sujet ici : Redux : Générer des conteneurs avec connect() à partir de React Redux (VisibleTodoList)

Answer 3

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 qui peut entraîner un changement d'état de l'application).

Answer 4

mapStateToProps , mapDispatchToProps y connect de react-redux offre un moyen pratique d'accéder à votre state y dispatch fonction de votre magasin. En gros, connect est un composant d'ordre supérieur, que vous pouvez aussi considérer comme une enveloppe si cela a un sens pour vous. Ainsi, chaque fois que votre state est modifié mapStateToProps sera appelé avec votre nouvelle state et par la suite comme vous props Le composant de mise à jour exécutera la fonction de rendu pour rendre votre composant dans le navigateur. mapDispatchToProps stocke également des valeurs de clés sur le props de votre composant, ils prennent généralement la forme d'une fonction. De cette façon, vous pouvez déclencher state changement de votre composant onClick , onChange événements.

De la documentation :

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 de bien connaître Fonctions apatrides de React y Composants d'ordre supérieur

Answer 5

mapStateToProps reçoit le state y props et vous permet d'extraire des props de l'état pour les passer au composant.

mapDispatchToProps reçoit dispatch y props et vous permet de lier les créateurs d'action à la répartition, de sorte que lorsque vous exécutez la fonction résultante, l'action est répartie.

Je trouve que cela vous évite seulement d'avoir à faire dispatch(actionCreator()) dans votre composant, ce qui le rend un peu plus facile à lire.

React redux : connect : Arguments