Việc sử dụng đối số ownProps trong mapStateToProps và mapDispatchToProps là gì?

Question 1

Tôi thấy rằng mapStateToPropsvà mapDispatchToPropschức năng mà được truyền cho các connectchức năng trong Redux mất ownPropsnhư một đối số thứ hai.

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

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

[ownprops]Đối số tùy chọn để làm gì?

Tôi đang tìm kiếm một ví dụ bổ sung để làm rõ ràng mọi thứ vì đã có một ví dụ trong tài liệu Redux

Question 2

Nếu ownPropstham số được chỉ định, react-redux sẽ chuyển các đạo cụ đã được chuyển cho thành phần vào các connecthàm của bạn . Vì vậy, nếu bạn sử dụng một thành phần được kết nối như thế này:

import ConnectedComponent from './containers/ConnectedComponent'

<ConnectedComponent
  value="example"
/>

Bên ownPropstrong của bạn mapStateToPropsvà các mapDispatchToPropshàm sẽ là một đối tượng:

{ value: 'example' }

Và bạn có thể sử dụng đối tượng này để quyết định những gì sẽ trả về từ các hàm đó.

Ví dụ: trên một thành phần bài đăng trên blog:

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

Bạn có thể trả lại những người tạo hành động Redux làm điều gì đó cho bài đăng cụ thể đó:

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

Bây giờ bạn sẽ sử dụng thành phần này như sau:

import BlogPostContainer from './BlogPostContainer.js'

<BlogPostContainer id={1} />

Question 3

ownProps đề cập đến các đạo cụ được cha mẹ truyền lại.

Ví dụ:

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

Câu trả lời của goto-bus-stop là tốt, nhưng một điều cần nhớ là, theo tác giả của redux, Abramov / gaearon, việc sử dụng ownProps trong các chức năng đó khiến chúng chậm hơn vì chúng phải gắn kết những người tạo hành động khi đạo cụ thay đổi.

Xem bình luận của anh ấy trong liên kết này: https://github.com/reduxjs/redux-devtools/issues/250