Quelle est l'utilité de l'arg ownProps dans mapStateToProps et mapDispatchToProps ?

Question

Je vois que le mapStateToProps et mapDispatchToProps qui sont transmises à la fonction connect dans Redux prennent ownProps comme deuxième argument.

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

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

Qu'est-ce que l'option [ownprops] argument pour ?

Je cherche un exemple supplémentaire pour clarifier les choses, car il y en a déjà un dans le document la documentation sur Redux

Answer 1

Si le ownProps est spécifié, react-redux passera les props qui ont été passés au composant à votre connect fonctions. Ainsi, si vous utilisez un composant connecté comme ceci :

import ConnectedComponent from './containers/ConnectedComponent'

<ConnectedComponent
  value="example"
/>

Le site ownProps à l'intérieur de votre mapStateToProps et mapDispatchToProps Les fonctions seront un objet :

{ value: 'example' }

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

---

Par exemple, sur un composant d'un article 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 pourriez renvoyer les créateurs d'actions Redux qui font quelque chose à ce poste 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

Vous pouvez maintenant utiliser ce composant comme suit :

import BlogPostContainer from './BlogPostContainer.js'

<BlogPostContainer id={1} />

Answer 2

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

Donc, 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
  };
};

Answer 3

La réponse de goto-bus-stop est bonne, mais il faut se rappeler que, selon l'auteur de redux, Abramov/gaearon, l'utilisation de ownProps dans ces fonctions les rend plus lentes parce qu'elles doivent lier à nouveau les créateurs d'action lorsque les props changent.

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