mapStateToPropsとmapDispatchToPropsにownProps argを使用するとは何ですか？

Question

Reduxのconnect関数に渡されたとmapDispatchToProps関数が第2引数としてownPropsとなることがわかります。

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

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

オプションの[ownprops]引数は何ですか？私はすでに1があるので、物事を明確にする追加の例を探しています

the Redux docs

Answer 1

ownPropsパラメータが指定されている場合は、あなたのconnect機能にコンポーネントに渡された小道具を渡します-Reduxのを反応させます。あなたは、このような連結成分を使用するのであれば、：あなたのmapStateToPropsとmapDispatchToProps関数内

import ConnectedComponent from './containers/ConnectedComponent' 

<ConnectedComponent 
    value="example" 
/> 

ownPropsが対象になります。

{ value: 'example' } 

そして、あなたがから復帰するかを決定するために、このオブジェクトを使用することができますそれらの機能。例えば

---

、ブログ記事のコンポーネント上：今、あなたは、このコンポーネントを使用することになり

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

：

// 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のアクションクリエイターを返すことができますように：

import BlogPostContainer from './BlogPostContainer.js' 

<BlogPostContainer id={1} />