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


below higher order component. hoc connected redux access 1 of action creators: importantreduxaction.

function withextrastuff (innercomponent) {   return class enhancer extends react.component {     constructor(props){       super(props)       this.importantmethod = this.importantmethod.bind(this)     }      importantmethod(){       //try call 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 wrapped component use hoc component. connects redux in order gain access different method: otherreduxaction.

class childcomponent extends react.component {   constructor(props){     super(props)     this.doimportantthing = this.doimportantthing.bind(this)   }    doimportantthing(){     //try call higher order component's method (this problems occur)     this.props.importantmethod()      //do 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 mapdispatchtoprops inside of hoc being overwritten child, , action creator: importantreduxaction, never being passed hoc. receives error the:

method undefined

i have solved passing method child component so:

/* child component definition above */  let mapdispatchtoprops = (dispatch)=>{   return bindactioncreators({otherreduxaction, importantreduxaction}, dispatch) } 

but solution not way want things work. there way have hoc merge in action creators wants use of wrapped component? or going have find new way around this?

tldr: hoc component uses action creator wraps child component has one. hoc action creator gets kicked curb , never passed.


Comments

Popular posts from this blog

What is happening when Matlab is starting a "parallel pool"? -

angular - DownloadURL return null in below code -

php - Cannot override Laravel Spark authentication with own implementation -