redux - mapStateToProps 和 mapDispatchToProps 中的 ownProps arg 有什么用？

Question

我看到传递给 Redux 中 connect 函数的 mapStateToProps 和 mapDispatchToProps 函数采用 ownProps作为第二个参数。

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

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

可选的[ownprops]参数的用途是什么？

我正在寻找一个额外的例子来使事情变得清楚，因为 the Redux docs 中已经有一个例子了

Answer 1

如果指定了 ownProps 参数，react-redux 会将传递给组件的 props 传递到您的 connect 函数中。因此，如果您使用这样的连接组件:

import ConnectedComponent from './containers/ConnectedComponent'

<ConnectedComponent
  value="example"
/>

mapStateToProps 和 mapDispatchToProps 函数中的 ownProps 将是一个对象:

{ value: 'example' }

您可以使用此对象来决定从这些函数返回什么。

<小时/>

例如，在博客文章组件上:

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

您可以返回对特定帖子执行某些操作的 Redux 操作创建者:

// 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

现在您将像这样使用该组件:

import BlogPostContainer from './BlogPostContainer.js'

<BlogPostContainer id={1} />