Higher Order Component-Redux-Versand, der durch verpackte Komponente redux-Versand überschrieben wird

Question

Unten ist die Komponente höherer Ordnung. Der HOC ist speziell mit redux verbunden, um Zugriff auf einen der Ersteller von Aktionen zu erhalten: 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) 
} 

Dies ist die umschlossene Komponente, die die HOC-Komponente verwendet. Es verbindet sich auch mit redux, um Zugang zu einer anderen Methode zu erhalten: 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) 

Das Problem tritt auf, dass meine mapDispatchToProps Innenseite meiner HOC durch das Kind überschrieben wird, und die Aktion Schöpfer: importantReduxAction wird nie in mein HOC geleitet wird. Er erhält den Fehler, der die:

Methode nicht definiert ist

ich gelöst habe dies durch die Methode in mein Kind Komponente vorbei wie so:

/* CHILD COMPONENT DEFINITION ABOVE */ 

let mapDispatchToProps = (dispatch)=>{ 
    return bindActionCreators({otherReduxAction, importantReduxAction}, dispatch) 
} 

Aber diese Lösung ist nicht wirklich So wie ich möchte, dass Dinge funktionieren. Gibt es eine Möglichkeit, mein HOC in den Aktionserstellern zusammenzuführen, die es mit denen der umschlossenen Komponente verwenden möchte? Oder muss ich einen neuen Weg finden?

TLDR: Die HOC-Komponente, die einen Aktionsersteller verwendet, umhüllt die untergeordnete Komponente, die ebenfalls über eine Komponente verfügt. Der HOC-Action-Creator wird gekickt, um ihn zu zügeln und wurde nie bestanden.

Answer 1

Es sieht aus wie Sie ein Problem mit Ihrem Beispiel haben.

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

    // ... 

    return connect(/* ... */)(Enhancer) 
} 

Sie sind return zweimal von Ihrem HOC ing, so dass Ihr Enhancer nie connect ed ist.

Ist dies in Ihrem Beispiel nur ein Tippfehler? Oder haben Sie das gleiche Problem in Ihrem Code? Denn das würde tatsächlich das Problem verursachen, das Sie sehen.