Higher Order Component redux dispatch being overwritten by wrapped component redux dispatch - reactjs

Question

Below is the Higher order component. The HOC is connected to redux specifically to get access to one of the action creators: importantReduxAction.
function withExtraStuff (InnerComponent) {
return class Enhancer extends React.Component {
constructor(props){
super(props)
this.importantMethod = this.importantMethod.bind(this)
}
importantMethod(){
//try to call the higher order component's action creator
this.props.importantReduxAction()
}
render(){
return <InnerComponent
{...this.props}
importantMethod={this.importantMethod}
/>
}
}
let mapDispatchToProps = (dispatch)=>{
return bindActionCreators({importantReduxAction}, dispatch)
}
return connect(null, mapDispatchToProps, null, {pure: false})(Enhancer)
}
This is the wrapped component that will use the HOC component. It also connects itself to redux in order to gain access to a different method: otherReduxAction.
class ChildComponent extends React.Component {
constructor(props){
super(props)
this.doImportantThing = this.doImportantThing.bind(this)
}
doImportantThing(){
//try to call the higher order component's method (this is where problems occur)
this.props.importantMethod()
//do something with this components dispatch
this.props.otherReduxAction()
}
render(){
return <div>
{this.doImportantThing()}
</div>
}
}
let EnhancedComponent = withExtraStuff(ChildComponent)
let mapDispatchToProps = (dispatch)=>{
return bindActionCreators({otherReduxAction}, dispatch)
}
export default connect(null, mapDispatchToProps, null, {pure: false})(EnhancedComponent)
The problem occurs that my mapDispatchToProps inside of my HOC is being overwritten by the child, and the action creator: importantReduxAction, is never being passed into my HOC. It receives the error that the:
method is undefined
I have solved this by passing the method into my child component like so:
/* CHILD COMPONENT DEFINITION ABOVE */
let mapDispatchToProps = (dispatch)=>{
return bindActionCreators({otherReduxAction, importantReduxAction}, dispatch)
}
But that solution is not really the way that I want things to work. Is there a way to have my HOC merge in the action creators that it wants to use with those of the wrapped component? Or am I going to have to find a new way around this?
TLDR: HOC Component that uses an action creator wraps child component that also has one. HOC action creator gets kicked to curb and never passed.

Answer 1

It looks like you have an issue with your example.
function withExtraStuff (InnerComponent) {
return class Enhancer extends React.Component {/* ... */}
// ...
return connect(/* ... */)(Enhancer)
}
You're returning twice from your HOC, so your Enhancer is never connected.
Is this just a typo in your example? Or do you have this same issue in your code? Because that would indeed cause the issue you're seeing.

Answer 2

The issue here is that you need to merge your props in the higher order component. The redux connect takes a third parameter which is a function (mergeProps). This function takes three parameters. See example here:
function mergeProps(stateProps, dispatchProps, ownProps) {
return {
...stateProps,
...dispatchProps,
...ownProps,
actions: Object.assign({}, dispatchProps.actions, ownProps.actions)
}
}
In my Wrapped Component I set up my mapDispatchToProps like so:
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({
...myDefinedActionsForMyComponent,
}, dispatch)
}
}
And in my HOC I set up my mapDispatchToProps the same way. The issue you are having can be resolved by implementing mergeProps in your HOC (higher order component). If you simply create the mergeProps function and console log the three parameters you'll see the values and can decide how best to join them. Based on my set up I simply had to do an object assign on the actions. You probably need to do something similar.
The connect would then look something like this in your HOC:
return connect(mapStateToProps, mapDispatchToProps, mergeProps)(Wrapper)