Redux: At todos example, What does the second parameter "ownProps" in container component FilterLink for?

[AlexCao2016]

Hi, team,
when I tried to study Redux example, I found that as following:
const mapStateToProps = (state, ownProps) => {
return {
active: ownProps.filter === state.visibilityFilter
}
}

const mapDispatchToProps = (dispatch, ownProps) => {
return {
onClick: () => {
dispatch(setVisibilityFilter(ownProps.filter))
}
}
}

const FilterLink = connect(
mapStateToProps,
mapDispatchToProps
)(Link)

export default FilterLink

I have one question in my issue title? what is it for? Is it related to presentational component "Link" because of has parameter "children"?

[alexanderchan]

ownProps gives access to the properties passed into the FilterLink. It is related to the presentational component Link in that it helps to generate the properties of Link

We can see this property in the footer. There is just one property filter that is used from ownProps in this component:

<FilterLink filter="SHOW_ALL">
All
</FilterLink>

mapStateToProps then wraps the Link component and maps the property active to be true if the state is SHOW_ALL.

<Link active="true">
All
</Link>

Perhaps we can imagine a component being wrapped by this FilterLink container.

class FilterLink extends React.Component {

constructor(props) {
   super(props);
   this.state = props.state;
   this.onClick = () => dispatch(setVisibilityFilter(this.props.filter)); // the work of mapDispatchToProps
}

render() {
  const active = this.props.filter === state.visibilityFilter; // the work of mapStateToProps
  return ( 
             <Link active={active} onClick={this.onClick}>
                   {this.props.children}
             </Link>
   )
 }
}

connect is doing more, but hopefully this helps visualize what it is doing. It wraps the simple component and maps redux state into component properties.

Otherwise the redux series from egghead walks into much more detail.

[codenostic]

@timdorr i did not understand the statement this.state = props.state . what does it do? and what is props.state? Is this coming from store ?
And also, thanks for putting this up as this is easier to understand than using connect.