การใช้ ownProps arg ใน mapStateToProps และ mapDispatchToProps คืออะไร?

Question 1

ฉันเห็นว่าmapStateToPropsและmapDispatchToPropsฟังก์ชันที่ส่งผ่านไปยังconnectฟังก์ชันใน Redux ใช้ownPropsเป็นอาร์กิวเมนต์ที่สอง

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

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

[ownprops]อาร์กิวเมนต์เป็นทางเลือกสำหรับอะไร?

ฉันกำลังมองหาตัวอย่างเพิ่มเติมเพื่อทำให้ชัดเจนเนื่องจากมีอยู่แล้วในเอกสาร Redux

Question 2

หากระบุownPropsพารามิเตอร์ react-redux จะส่งอุปกรณ์ประกอบฉากที่ส่งผ่านไปยังคอมโพเนนต์ไปยัง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

คำตอบของ goto-bus-stop นั้นดี แต่สิ่งหนึ่งที่ต้องจำไว้ก็คือตามที่ผู้เขียน Redux Abramov / gaearon ใช้ ownProps ในฟังก์ชั่นเหล่านั้นทำให้ช้าลงเพราะพวกเขาต้องผูกมัดผู้สร้างแอ็คชั่นเมื่ออุปกรณ์ประกอบฉากเปลี่ยนไป

ดูความคิดเห็นของเขาในลิงค์นี้: https://github.com/reduxjs/redux-devtools/issues/250