[解決済み] mapStateToPropsとmapDispatchToPropsのownPropsアーギュはどのように使用するのですか？

質問

私は mapStateToProps と mapDispatchToProps 関数に渡されます。 connect 関数は、Reduxでは ownProps を第二引数として受け取ります。

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

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

オプションの [ownprops] の引数は何のためですか？

にすでにあるため、私は物事を明確にするための追加の例を探しています。 Reduxのドキュメント

どのように解決するのですか？

もし ownProps パラメータが指定された場合、react-redux はコンポーネントに渡された props をあなたの connect 関数に渡します。つまり、このような接続型コンポーネントを使用した場合。

import ConnectedComponent from './containers/ConnectedComponent'

<ConnectedComponent
  value="example"
/>

は ownProps の中に mapStateToProps と mapDispatchToProps の関数はオブジェクトになります。

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