What is the use of the ownProps arg in mapStateToProps and mapDispatchToProps?

Question

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

Answer 1

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

Answer 2

ownProps refers to the props that were passed down by the parent. A component usually has 2 sources of input: the store and any props passed by its parent component.

So, for example:

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

The difference between mapStateToProps and mapDisptachToProps is what each does with the store. The first is for READ, the latter for WRITE.

mapStateToProps connects the store values as props mapDisptachToProps are functions that let you update the store.