mapStateToProps 및 mapDispatchToProps에서 ownProps 인수를 사용하는 것은 무엇입니까?

mapStateToProps 및 mapDispatchToProps에서 ownProps 인수를 사용하는 것은 무엇입니까?

---

Redux 에서 함수에 전달되는 mapStateToPropsand mapDispatchToProps함수 가 두 번째 인수로 사용 된다는 것을 알 수 connect있습니다 ownProps.

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

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

선택적 [ownprops]인수 는 무엇입니까 ?

Redux 문서에 이미 하나가 있으므로 명확하게 설명하기 위해 추가 예제를 찾고 있습니다.

---

경우 ownProps매개 변수를 지정, 반응-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} />

---

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
  };
};

---

goto-bus-stop의 대답은 좋지만 기억해야 할 한 가지는 redux의 저자 Abramov / gaearon에 따르면 이러한 함수에서 ownProps를 사용하면 소품이 변경 될 때 액션 제작자를 다시 바인딩해야하기 때문에 속도가 느려진다는 것입니다.

이 링크에서 그의 의견을 참조하십시오 : https://github.com/reduxjs/redux-devtools/issues/250

참고 URL : https://stackoverflow.com/questions/41198842/what-is-the-use-of-the-ownprops-arg-in-mapstatetoprops-and-mapdispatchtoprops