Какая польза от ownProps arg в mapStateToProps и mapDispatchToProps?

Я вижу, что функции mapStateToProps и mapDispatchToProps, которые передаются функции connect в Redux, принимают ownProps как второй аргумент.

Что такое необязательный аргумент [ownprops] для?

Я ищу дополнительный пример, чтобы сделать все понятным, поскольку в в документах Redux уже есть один

Ответы

Ответ 1

Если указан параметр 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>
}

Вы могли бы вернуть создателей Action 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} />