MapStateToProps और mapDispatchToProps में स्वयंप्रॉप्स arg का उपयोग क्या है?

Question 1

मैं देख रहा हूं कि Redux में जो फ़ंक्शन mapStateToPropsऔर mapDispatchToPropsफ़ंक्शन पास किए गए हैं वे दूसरे तर्क के रूप connectमें लेते हैं ownProps।

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

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

इसके लिए वैकल्पिक [ownprops]तर्क क्या है ?

मैं चीजों को स्पष्ट करने के लिए एक अतिरिक्त उदाहरण की तलाश कर रहा हूं क्योंकि Redux डॉक्स में पहले से ही एक है

Question 2

यदि ownPropsपैरामीटर निर्दिष्ट किया गया है, तो प्रतिक्रिया-रिडक्स उन प्रॉपर को पास करेगा जो घटक को आपके 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} />

Question 3

ownProps का तात्पर्य उन प्रॉप्स से है जिन्हें माता-पिता द्वारा पारित किया गया था।

इसलिए, उदाहरण के लिए:

Parent.jsx:

...
<Child prop1={someValue} />
...

Child.jsx:

class Child extends Component {
  props: {
    prop1: string,
    prop2: string,
  };
...
}

const mapStateToProps = (state, ownProps) => {
  const prop1 = ownProps.prop1;
  const tmp = state.apiData[prop1]; // some process on the value of prop1
  return {
    prop2: tmp
  };
};

Question 4

गोटो-बस-स्टॉप का उत्तर अच्छा है, लेकिन याद रखने वाली एक बात यह है कि, Redux के लेखक के अनुसार, अब्रामोव / गैरोंन, उन कार्यों में स्वयंप्रॉप्स का उपयोग करके उन्हें धीमा कर देता है क्योंकि उन्हें प्रॉप्स बदलने पर एक्शन क्रिएटर्स को विद्रोह करना होगा।

इस लिंक में उनकी टिप्पणी देखें: https://github.com/reduxjs/redux-devtools/issues/250