A higher order reduction layout is replaced by processing a wrapped redux component

Question

Below is a component of a higher order. The HOC connects to the shorthand specifically for access to one of the creators of the action: 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 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 a wrapped component that will use the HOC component. It also connects to the shorthand to access another 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 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 is that my mapDispatchToProps inside my HOC is overwritten by the child, and the action creator: importantReduxAction never passed to my HOC. It receives an error message:

undefined method

I solved this by passing the method to my child component as follows:

 /* CHILD COMPONENT DEFINITION ABOVE */ let mapDispatchToProps = (dispatch)=>{ return bindActionCreators({otherReduxAction, importantReduxAction}, dispatch) } 

But this solution is actually not the way I want everything to work. Is there a way for my HOC to integrate in the action creators that he wants to use with those that were associated with the wrapped component? Or will I have to find a new way?

TL; DR: HOC The component that uses the action creator wraps a child component that also has it. The creator of the HOC-action receives a blow to curb and never passed.

Answer 1

It looks like you have a problem with your example.

 function withExtraStuff (InnerComponent) { return class Enhancer extends React.Component {/* ... */} // ... return connect(/* ... */)(Enhancer) } 

You return twice from your HOC twice, so your Enhancer has never been connect ed.

Is this just a typo in your example? Or do you have the same problem in your code? Because it really will cause the problem you see.