mapDispatchToProps
est un paramètre optionnel de la fonction connect()
de la librairie React Redux. Il vous permet de spécifier comment les créateurs d’actions sont mappés aux props d’un composant. En d’autres termes, mapDispatchToProps
définit comment un composant peut déclencher des changements d’état dans le store Redux.
mapDispatchToProps
peut être un objet ou une fonction.
Lorsque mapDispatchToProps
est un objet :
Chaque propriété de l’objet représente un créateur d’action. React Redux utilise automatiquement bindActionCreators()
pour lier chaque créateur d’action à la fonction dispatch()
, puis les transmet comme props au composant. Exemple :
const mapDispatchToProps = {
increment: () => ({ type: 'INCREMENT' }),
decrement: () => ({ type: 'DECREMENT' })
};
Dans cet exemple, le composant recevra deux props : increment
et decrement
. Appeler this.props.increment()
enverra l’action { type: 'INCREMENT' }
au store.
Lorsque mapDispatchToProps
est une fonction :
Cette fonction reçoit dispatch
comme paramètre et retourne un objet. Cet objet mappe les props du composant aux fonctions de dispatch d’actions. Cela vous permet de personnaliser la façon dont les actions sont dispatchées et de transmettre des paramètres supplémentaires si nécessaire. Exemple :
const mapDispatchToProps = (dispatch) => {
return {
increment: () => dispatch({ type: 'INCREMENT' }),
decrement: () => dispatch({ type: 'DECREMENT' }),
incrementByAmount: (amount) => dispatch({ type: 'INCREMENT_BY_AMOUNT', payload: amount })
};
};
Avec cette approche, vous contrôlez entièrement le dispatch des actions. Par exemple, incrementByAmount
vous permet de dispatcher une action avec un payload (une valeur supplémentaire).
mapDispatchToProps
simplifie la connexion des composants au store Redux. Il permet d’écrire un code plus clair et plus facile à tester en séparant la logique de gestion des actions du composant. En utilisant mapDispatchToProps
, votre composant se concentre sur l’affichage des données et l’appel des props fournies pour modifier l’état, sans se soucier des détails du dispatch des actions.
Si vous n’utilisez pas mapDispatchToProps
, le composant recevra dispatch
comme prop. Cependant, l’utilisation de mapDispatchToProps
rend le code plus lisible et plus facile à maintenir, surtout lorsque vous avez plusieurs créateurs d’actions. Cela vous permet également de tirer pleinement parti de bindActionCreators
pour optimiser les performances.