web-dev-qa-db-fra.com

Qu'est-ce que ownProps dans react-redux?

Je lis API sur react-redux et regarde l'un des exemples de github de Redux: Redux todo app

L'un des conteneurs, FilterLink, a mapDispatchToProps (et mapStateToProps) pour accepter deux arguments, l'un d'eux étant ownprops .

const mapDispatchToProps = (dispatch, ownProps) => ({
  onClick: () => {
    dispatch(setVisibilityFilter(ownProps.filter))
  }
})

La documentation de l'API dit:

"Si votre fonction mapStateToProps est déclarée comme prenant deux paramètres, elle sera appelée avec l'état de stockage comme premier paramètre et les accessoires passés au composant connecté comme deuxième paramètre, et sera également ré-invoqué chaque fois que le composant connecté reçoit de nouveaux accessoires tels que déterminés par des comparaisons d'égalité superficielles. (Le deuxième paramètre est normalement appelé ownProps par convention.) "

Je n'arrive toujours pas à comprendre ce qu'il fait. Quelqu'un peut-il expliquer ce que ownProps fait avec un autre exemple?

reactjsreduxreact-redux
16
Iggy

ownProps sont les attributs transmis lors de l'utilisation du composant. En clair React ceux-ci seraient simplement appelés accessoires.

par exemple dans Footer.js le FilterLink est utilisé comme:

<FilterLink filter="SHOW_ALL">
  All
</FilterLink>

La méthode mapStateToProps serait donc appelée avec ownProps ayant la valeur:

{
  "filter": "SHOW_ALL",
  "children": ...
}

La méthode mapStateToProps est utilisée dans un composant encapsulé Redux pour combiner les propriétés explicitement transmises (ownProps) avec l'état géré par le magasin Redux dans le props du composant encapsulé .

Donc, dans votre exemple lié de FilterLink

const mapStateToProps = (state, ownProps) => ({
  active: ownProps.filter === state.visibilityFilter
})

le composant est actif (this.props.active == true) si l'attribut filter (par exemple SHOW_ALL) correspond à visibiltyFilter dans state, c'est-à-dire s'il est actuellement filtré par cette valeur.

16
Harald Gliebe