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

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

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

Solution 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.

Solution 3:

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?

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts