Quelle est la différence entremapStateToProps
etmapDispatchToProps
arguments de la fonction connect
dans react redux ?? Quelqu'un peut-il donner une explication appropriée avec des exemples
mapStateToProps
est une fonction que vous utiliseriez pour fournir les données de magasin à votre composant, alors que mapDispatchToProps
vous servirait à fournir les créateurs d'action en tant qu'éléments de votre composant.
Selon les docs:
Si
mapStateToProps
argument est spécifié, le nouveau composant utilisera abonnez-vous aux mises à jour du magasin Redux. Cela signifie que, à tout moment, le magasin est mis à jour,mapStateToProps
sera appelé. Les résultats demapStateToProps
doit être un objet simple dans lequel seront fusionnés les accessoires du composant.Avec
mapDispatchToProps
chaque créateur d’action intégré à une dépêche appel afin qu’ils puissent être appelés directement, seront fusionnés dans le les accessoires du composant.
Un exemple simple serait
function mapStateToProps(state) {
return { todos: state.todos }
}
function mapDispatchToProps(dispatch) {
return { addTodo: bindActionCreators(addTodo, dispatch) }
}
export default connect(mapStateToProps, mapDispatchToProps)(Todos);
Dans un terme très simple,
mapStateToProps : Il connecte l'état redux aux accessoires du composant react.
mapDispatchToProps : Il connecte les actions de redux pour réagir aux accessoires.
Un exemple vraiment léger: (j'espère que vous voyez ce que je veux dire)
// state
const mapStateToProps = state => {
return { lists: state.lists };
};
// props
const mapDispatchToProps = ({ lists }) => (
<ul>
{
lists.map(el => (
<li key={ el.id }>
{ el.heading }
</li>
)
}
</ul>
);
// Now, connect state to prop
const List = connect(mapStateToProps)(mapDispatchToProps);
En termes très simples:
mapStateToProps
est appelé lorsque vous souhaitez obtenir la valeur de l'état global de votre composant
function mapStateToProps(state) {
return {
message: state.message
};
}
La valeur de l'état global n'est modifiée qu'à l'aide d'une action. Donc, si vous voulez changer la valeur de l'état global, vous avez besoin d'une action.mapDispatchToProps
est utilisé pour lier une action dans votre composant.