Widzę, że funkcja mapStateToProps
and, mapDispatchToProps
która jest przekazywana do connect
funkcji w Redux, przyjmuje ownProps
jako drugi argument.
[mapStateToProps(state, [ownProps]): stateProps] (Function):
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):
Jaki jest opcjonalny [ownprops]
argument?
Szukam dodatkowego przykładu, aby wyjaśnić sprawę, ponieważ taki istnieje już w dokumentacji Redux
redux
react-redux
to się stanie
źródło
źródło
Odpowiedzi:
Jeśli
ownProps
parametr jest określony, react-redux przekaże właściwości przekazane do komponentu do twoichconnect
funkcji. Jeśli więc używasz takiego podłączonego komponentu:import ConnectedComponent from './containers/ConnectedComponent' <ConnectedComponent value="example" />
ownProps
Wewnątrz swoimimapStateToProps
andmapDispatchToProps
funkcji będzie przedmiotem:{ value: 'example' }
I możesz użyć tego obiektu, aby zdecydować, co zwrócić z tych funkcji.
Na przykład w składniku wpisu na 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żesz zwrócić twórców akcji Redux, którzy zrobią coś z tym konkretnym postem:
// 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 możesz użyć tego komponentu w następujący sposób:
import BlogPostContainer from './BlogPostContainer.js' <BlogPostContainer id={1} />
źródło
ownProps odnosi się do właściwości przekazanych przez rodzica.
Na przykład:
Parent.jsx:
Child.jsx:
źródło
Odpowiedź goto-bus-stop jest dobra, ale jedną rzecz do zapamiętania jest to, że według autora redux, Abramova / gaearona, użycie ownProps w tych funkcjach powoduje ich spowolnienie, ponieważ muszą ponownie powiązać twórców akcji, gdy zmieniają się rekwizyty.
Zobacz jego komentarz w tym linku: https://github.com/reduxjs/redux-devtools/issues/250
źródło