Se o ownProps
parâmetro for especificado, react-redux passará os adereços que foram passados para o componente em suas connect
funções. Portanto, se você usar um componente conectado como este:
import ConnectedComponent from './containers/ConnectedComponent'
<ConnectedComponent
value="example"
/>
O ownProps
dentro de suas funções mapStateToProps
e mapDispatchToProps
será um objeto:
{ value: 'example' }
E você pode usar esse objeto para decidir o que retornar dessas funções.
Por exemplo, em um componente de postagem 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>
}
Você poderia devolver os criadores de ação do Redux que fazem algo para aquela postagem específica:
// 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
Agora você usaria este componente da seguinte maneira:
import BlogPostContainer from './BlogPostContainer.js'
<BlogPostContainer id={1} />