Si le ownProps
paramètre est spécifié, react-redux transmettra les accessoires qui ont été passés au composant dans vos connect
fonctions. Donc, si vous utilisez un composant connecté comme celui-ci:
import ConnectedComponent from './containers/ConnectedComponent'
<ConnectedComponent
value="example"
/>
L' ownProps
intérieur de vos fonctions mapStateToProps
et mapDispatchToProps
sera 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} />