web-dev-qa-db-fra.com

Quelle est la différence entre mapstatetoprops et mapdispatchtoprops

Quelle est la différence entremapStateToPropsetmapDispatchToPropsarguments de la fonction connect dans react redux ?? Quelqu'un peut-il donner une explication appropriée avec des exemples

reactjsreduxreact-redux
6
Mily Alfrad

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:

SimapStateToPropsargument 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 de mapStateToProps doit être un objet simple dans lequel seront fusionnés les accessoires du composant.

AvecmapDispatchToPropschaque 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);
13
Shubham Khatri

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);
9
Bhojendra Rauniyar

En termes très simples:

mapStateToPropsest 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.mapDispatchToPropsest utilisé pour lier une action dans votre composant.

1
Sabin Bogati