Access props sent to components along with Redux state data

react-redux connect method passes props to the wrapped element. The connect method can receive 3 methods:

• mapStateToProps - create the data props
• mapDispatchToProps - create the actions props
• mergeProps - combine the props produced by the 2 previous methods, and adds the parent assign props (ownProps / parentProps).

Usually you only override the mapStateToProps and or mapDispatchToProps, and you use the default mergeProps (defaultMergeProps).

This is the definition of defaultMergeProps method:

const defaultMergeProps = (stateProps, dispatchProps, parentProps) => ({
  ...parentProps, // ownProps
  ...stateProps, // mapStateToProps
  ...dispatchProps // mapDispatchToProps
})

So unless you override defaultMergeProps by your own mergeProps method, you'll always get the props assigned by the parent.

btw - both mapStateToProps and mapDispatchToProps receive ownProps as well, so they can combine them with the state, and create new data props / actions props.

Own component props are available as second argument of mapStateToProps function:

// ParentComponent.js

// ... other component methods ...
render() {
  return <TodoContainer id="1" />
}

// TodoContainer.js

// `ownProps` variable contains own component props
function mapStateToProps(state, ownProps) {
  return {
    todo: state.todos[ownProps.id]
  };
}