mapStateToProps 和 mapDispatchToProps 中的 ownProps 参数有什么用?

问题描述

我看到在 Redux 中传递给 connect 函数的 mapStateToProps 和 mapDispatchToProps 函数采用 ownProps作为第二个论点.

[mapStateToProps(state, [ownProps]): stateProps] (Function):[mapDispatchToProps(dispatch, [ownProps]): dispatchProps](对象或函数):

什么是可选的 [ownprops] 参数?

我正在寻找一个额外的例子来说明问题，因为 Redux 文档

解决方案

如果指定了 ownProps 参数，react-redux 会将传递给组件的 props 传递到您的 connect 函数中.因此，如果您使用这样的连接组件:

从 './containers/ConnectedComponent' 导入 ConnectedComponent<连接组件值=示例"/>

mapStateToProps 和 mapDispatchToProps 函数中的 ownProps 将是一个对象:

{ value: 'example' }

你可以使用这个对象来决定从这些函数返回什么.

例如，在博客文章组件上:

//BlogPost.js导出默认功能BlogPost(道具){返回 
<h2>{props.title}</h2><p>{props.content}</p><button onClick={props.editBlogPost}>编辑</button>
}

您可以返回对特定帖子执行某些操作的 Redux 操作创建者:

//BlogPostContainer.js从redux"导入 { bindActionCreators }从'react-redux'导入{连接}从 './BlogPost.js' 导入 BlogPost导入 * 作为来自 './actions.js' 的动作const mapStateToProps = (state, props) =>//从商店中获取此博客文章 ID 的博客文章数据.getBlogPostData(state, props.id)const mapDispatchToProps = (dispatch, props) =>bindActionCreators({//自动将博客文章 ID 传递给操作创建者，因此//包装好的博客文章组件可以简单地调用`props.editBlogPost()`:editBlogPost: () =>actions.editBlogPost(props.id)}， 派遣)const BlogPostContainer = 连接(mapStateToProps，mapDispatchToProps)(BlogPost)导出默认的 BlogPostContainer

现在你可以像这样使用这个组件:

从 './BlogPostContainer.js' 导入 BlogPostContainer<BlogPostContainer id={1}/>

I see that the mapStateToProps and mapDispatchToProps function which are passed to the connect function in Redux take ownProps as a second argument.

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

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

What is the optional [ownprops] argument for?

I am looking for an additional example to make things clear as there is already one in the Redux docs

解决方案

If the ownProps parameter is specified, react-redux will pass the props that were passed to the component into your connect functions. So, if you use a connected component like this:

import ConnectedComponent from './containers/ConnectedComponent'

<ConnectedComponent
  value="example"
/>

The ownProps inside your mapStateToProps and mapDispatchToProps functions will be an object:

{ value: 'example' }

And you could use this object to decide what to return from those functions.

---

For example, on a blog post component:

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

You could return Redux action creators that do something to that specific post:

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

Now you would use this component like so:

import BlogPostContainer from './BlogPostContainer.js'

<BlogPostContainer id={1} />

这篇关于mapStateToProps 和 mapDispatchToProps 中的 ownProps 参数有什么用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！