Que veut dire mapDispatchToProps ?
La librairie ReactJS permet de construire des interfaces utilisateurs en JavaScript, pour des sites internet ou des applications web. Ces dernières ne s'occupent pas de la logique métier et la librairie n'est pas aussi complète qu'un framework. Si vous souhaitez construire entièrement une application, vous devez l'associer à d'autres outils. C'est là qu'intervient Redux. Redux est un outil servant de container à la couche métier d'une application JavaScript. Ces deux outils s'associent donc parfaitement et la méthode "mapDispatchToProps()" intervient dans la logique de fonctionnement entre ces deux outils.
Un des modèles de développement utilisé pour une application ReactJS avec Redux est le modèle "Container - Component". Un container est géré par Redux. Il contient toute la logique métier, c’est-à-dire gérer les éléments qui vont être affichés et les éléments de l'application. Le composant (component en anglais), développé avec React, s'occupe uniquement de l'affichage. Il va pour cela s'appuyer sur les "props", des éléments accessibles uniquement en lecture seule. Voici un exemple de composant :
class monComposant extends Component {
afficher = () => {
this.props.afficher()
}
render() {
<div>
<h1>Le message est : {this.props.message}</h1>
<Button onClick={sendAlert}/>
</div>
}
}
Un composant contient dans ses propriétés des variables mais également des composants.
Dans le container, on attribue aux propriétés les variables et les actions correspondantes. C'est là qu'intervient la méthode "mapDispatchToProps()". Elle permet d'envoyer des actions aux propriétés du container. Elle est à utiliser en association avec la méthode "mapStateToProps" qui permet d'envoyer des variables aux containers.
// monContainer.js
function mapDispatchToProps(dispatch) {
return({
afficher: () => {dispatch(ALERT_ACTION)}
})
}
function mapStateToProps(etat} {
return({message: etat.monMessage})
}
export const monContainer = connect(
mapStateToProps, mapDispatchToProps)(
monComposant
)
Les développeurs de Redux proposent sur leur site internet un guide pour vous aider à faire interagir ReactJS avec leur outil : https://redux.js.org/basics/usage-with-react.