Redux: mapStateToProps why second parameter ownProps

Question

I have seen many times people are connecting redux to component and they are using second parameter in mapStateToProps.

function mapStateToProps(state, ownProps) {
   return {
   rowData: state.table.rows[0],
   }; 
}

Is in it useless? If child component has passed props from parent why should we map/pass them again in mapStateToProps?

What is the advantage of this?

Greetings

Well, it is useless in your current example, as they are not really used here, but maybe they just want to receive a chunk of the state instead? — Icepickle, Dec 05 '18 at 08:20
Sometimes you need one of the incoming props to do your mapping. For example, imagine a selector `getPriceForProduct` that takes a `productId` that is an incoming prop on `ownProps`. That's one way it's useful to have `ownProp`. — Jamie Dixon, Dec 05 '18 at 08:24
If you, for example, wish to use a router library to show a specific row, that library would most likely pass the ID as a prop to your component, which could be used to pull the desired data out of the table rows collection. — hbentlov, Dec 05 '18 at 08:24
@JamieDixon but why not use the selector in parent, take the let say product by id via this selector and pass to child the product instead of productId? — Ernesto, Dec 05 '18 at 08:34
@Ernesto See hbentlov 's answer above your comment. This is a good example of an ID being present (from the URL) which is then used to select some kind of object. — Jamie Dixon, Dec 07 '18 at 14:42
Possible duplicate of [What is ownProps in react-redux?](https://stackoverflow.com/questions/47647070/what-is-ownprops-in-react-redux) — AncientSwordRage, Jul 19 '19 at 10:02

score 1 · Answer 1 · answered Dec 05 '18 at 10:23

The usage of second parameter in mapStateToProps depends purely on the application. Mostly you may not need it, but in certain scenarios where the selector depends on the props to filter out the result, it is useful to use the props value from mapStateToProps

A scenario where your might need to make use of props are

Say you have a redux state data called used and you only need to show users in a specific region that comes as a prop to the component. You can make use of this prop value in mapStateToProps and return the filtered results instead of returning the entire result and filtering in render which might be a little less performant

score 1 · Answer 2 · answered Feb 19 '19 at 15:12

You can avoid unnecessary renders, via retaining some possibly small subset of the store data with the help of some props.

For example, you have a slideshow application and Redux stores all the slides, and your component is responsible for a single slide. A prop value contains the slide number. By extracting the store data only for that specific slide, you make it easier for React and React-Redux to avoid unnecessary rerenders. Maybe the store changed due to some other user having edited another slide, in your collaborative presentation editor - no reason for your slide to get rerendered.

https://react-redux.js.org/api/connect#ownprops

Besides, Redux is global state, while your component can work with data just needed for that component. If you have plans to ever reuse your component, OR to ever consider switching from Redux (or even React) to something else, or just want to follow good practice by uncoupling Model from View, then it makes sense to separate your component from what's essentially a singleton global variable as much as you can. By carving out only the data you need, and possibly shaping it to the needs of your component, you performed a global Model to local ViewModel mapping, and it's easy to take your component elsewhere, without concern for what the global Model was when you implemented it. By using eg. Recompose, you can take it further and make things you can just move around freely.

score 0 · Answer 3 · edited Dec 05 '18 at 10:15

0

There may overwrite the previous field, so it gives you a choice.

eg: return Object.assign({},state,ownProps);

edited Dec 05 '18 at 10:15

EstevaoLuis

2,422
7
33
40

answered Dec 05 '18 at 08:30

TaoHuang

1

score 0 · Answer 4 · answered Dec 05 '18 at 10:32

The second arguments normally comes into picture when you want to extract the some values from the props or assign value in the return of mapStateToProps using your values in props, then the second argument comes into picture. A classic usage would be writing selectors which uses values from store and the props passed to the component.

Redux: mapStateToProps why second parameter ownProps

4 Answers4