À quoi sert l'argument ownProps dans mapStateToProps et mapDispatchToProps?

95

Je vois que les fonctions mapStateToPropset mapDispatchToPropsqui sont passées à la connectfonction dans Redux prennent ownPropscomme second argument.

[mapStateToProps(state, [ownProps]): stateProps] (Function):

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):

À quoi sert l' [ownprops]argument facultatif ?

Je recherche un exemple supplémentaire pour clarifier les choses car il y en a déjà un dans la documentation Redux

redux react-redux il y aura du code
la source
Pourriez-vous être plus précis; Qu'est-ce qui n'est pas clair dans les explications de cet argument dans la documentation à laquelle vous faites un lien?
jonrsharpe
Je cherchais juste un exemple pratique supplémentaire où l'argument a été utilisé.
aura le code du
1
Pourriez-vous ensuite modifier la question pour que cela soit clair?
jonrsharpe
1
@jonrsharpe La documentation react-redux ne dit pas ce que c'est, mais simplement qu'elle existe, qu'elle s'appelle ownProps et que l'arité de la fonction détermine si elle est passée - pas ce qu'elle est.
deb0ch
@ deb0ch Je ne sais pas ce qu'il a dit il y a 18 mois, mais pour le moment, il dit "les accessoires sont passés au composant connecté" . Quoi qu'il en soit, le PO a depuis édité la question et reçu et accepté une réponse.
jonrsharpe

Réponses:

110

Si le ownPropsparamètre est spécifié, react-redux transmettra les accessoires qui ont été passés au composant dans vos connectfonctions. Donc, si vous utilisez un composant connecté comme celui-ci:

import ConnectedComponent from './containers/ConnectedComponent'

<ConnectedComponent
  value="example"
/>

L' ownPropsintérieur de vos fonctions mapStateToPropset mapDispatchToPropssera un objet:

{ value: 'example' }

Et vous pouvez utiliser cet objet pour décider de ce qu'il faut retourner de ces fonctions.

Par exemple, sur un composant de publication de blog:

// BlogPost.js
export default function BlogPost (props) {
  return <div>
    <h2>{props.title}</h2>
    <p>{props.content}</p>
    <button onClick={props.editBlogPost}>Edit</button>
  </div>
}

Vous pouvez renvoyer les créateurs d'action Redux qui font quelque chose à ce message spécifique:

// BlogPostContainer.js
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import BlogPost from './BlogPost.js'
import * as actions from './actions.js'

const mapStateToProps = (state, props) =>
  // Get blog post data from the store for this blog post ID.
  getBlogPostData(state, props.id)

const mapDispatchToProps = (dispatch, props) => bindActionCreators({
  // Pass the blog post ID to the action creator automatically, so
  // the wrapped blog post component can simply call `props.editBlogPost()`:
  editBlogPost: () => actions.editBlogPost(props.id)
}, dispatch)

const BlogPostContainer = connect(mapStateToProps, mapDispatchToProps)(BlogPost)
export default BlogPostContainer

Maintenant, vous utiliseriez ce composant comme ceci:

import BlogPostContainer from './BlogPostContainer.js'

<BlogPostContainer id={1} />
arrêt de bus
la source
11
Remarque - defaultProps n'est pas inclus dans ownProps
Mark Swardstrom
13

ownProps fait référence aux accessoires qui ont été transmis par le parent.

Ainsi, par exemple:

Parent.jsx:

...
<Child prop1={someValue} />
...

Child.jsx:

class Child extends Component {
  props: {
    prop1: string,
    prop2: string,
  };
...
}

const mapStateToProps = (state, ownProps) => {
  const prop1 = ownProps.prop1;
  const tmp = state.apiData[prop1]; // some process on the value of prop1
  return {
    prop2: tmp
  };
};
Bar Horing
la source
8

La réponse de goto-bus-stop est bonne, mais une chose à retenir est que, selon l'auteur de redux, Abramov / gaearon, l'utilisation d'ownProps dans ces fonctions les ralentit car ils doivent relier les créateurs d'action lorsque les accessoires changent.

Voir son commentaire dans ce lien: https://github.com/reduxjs/redux-devtools/issues/250

Steven Anderson
la source