Co to jest użycie argumentu ownProps w mapStateToProps i mapDispatchToProps?

Question

Widzę, że funkcje mapStateToProps i mapDispatchToProps, które są przekazywane do funkcji connect w Redux, przyjmują ownProps jako drugi argument.

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

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

Jaki jest opcjonalny argument [ownprops]?

szukam dodatkowej przykład Żeby było jasne, ponieważ nie jest już jednym z the Redux docs

Answer 1

Jeśli parametr ownProps jest określony, reagują-Redux minie rekwizyty, które zostały przekazane do komponentu do swoich funkcji connect . Tak więc, jeśli użyć podłączonego urządzenia takiego:

import ConnectedComponent from './containers/ConnectedComponent' 

<ConnectedComponent 
    value="example" 
/> 

ownProps wewnątrz firmy mapStateToProps i mapDispatchToProps funkcji będzie przedmiotem:

{ value: 'example' } 

I można użyć tego obiektu, aby zdecydować, co do powrotu z te funkcje.

---

Na przykład składnik blogu:

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

Można powrócić twórców działania Redux, że coś zrobić, aby tego konkretnego postu:

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

Teraz należałoby użyć tego składnika tak:

import BlogPostContainer from './BlogPostContainer.js' 

<BlogPostContainer id={1} />