Se il ownProps
parametro è specificato, react-redux passerà gli oggetti di scena che sono stati passati al componente nelle tue connect
funzioni. Quindi, se utilizzi un componente connesso come questo:
import ConnectedComponent from './containers/ConnectedComponent'
<ConnectedComponent
value="example"
/>
L' ownProps
interno delle tue funzioni mapStateToProps
e mapDispatchToProps
sarà un oggetto:
{ value: 'example' }
E potresti usare questo oggetto per decidere cosa restituire da quelle funzioni.
Ad esempio, su un componente di un post del 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>
}
Potresti restituire i creatori di azioni Redux che fanno qualcosa per quel post specifico:
// 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
Ora useresti questo componente in questo modo:
import BlogPostContainer from './BlogPostContainer.js'
<BlogPostContainer id={1} />