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
Post a Comment