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

Could you be more specific; what is unclear about the explanations of that argument in the documentation you link to? — jonrsharpe, Dec 17 '16 at 13:11
I was just looking for an additional practical example where the argument was used. — therewillbecode, Dec 18 '16 at 09:45
@jonrsharpe The react-redux docs don't say what it is, just that it exists, is called ownProps and that the arity of the function determines if it is passed - not what it is. — deb0ch, Jun 20 '18 at 13:23
@deb0ch I don't know what it said 18 months ago, but right now it says *"the props passed to the connected component"*. Either way, the OP has since edited the question and received and accepted an answer. — jonrsharpe, Jun 20 '18 at 16:06

goto-bus-stop · Accepted Answer · 2018-10-21T12:07:24.740

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

@Ali - In the example in this answer, if the `BlogPost` component has default properties (using `BlogPost.defaultProps={}` or default argument values syntax), those values will *not* be part of the `ownProps` object. Only properties that were explicitly provided are available. This is because React fills in the defaults at a later stage, and the `connect()` code runs before that. — goto-bus-stop, Dec 14 '20 at 16:00

Bar Horing · Answer 2 · 2022-01-22T11:53:15.700

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.

score 11 · Answer 3 · answered May 25 '18 at 03:02

goto-bus-stop's answer is good, but one thing to remember is that, according to the author of redux, Abramov/gaearon, using ownProps in those functions makes them slower because they must rebind the action creators when the props change.

See his comment in this link: https://github.com/reduxjs/redux-devtools/issues/250

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

3 Answers3

Linked