上位コンポーネントコンポーネントreduxディスパッチがラップされたコンポーネントreduxディスパッチによって上書きされる

Question

以下は高次コンポーネントです。 HOCはreduxに接続されており、具体的にはアクション作成者の1人にアクセスします：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) 
} 

これは、HOCコンポーネントを使用するラップされたコンポーネントです。それはまた、別の方法へのアクセスを得るためにreduxに接続します：otherReduxAction。 importantReduxAction、私HOCに渡されないさん：

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) 

問題は、私のHOCの内側に私のmapDispatchToProps子によって上書きされ、アクションの作成者がいることを発生します。そのように私の子コンポーネントにメソッドを渡すことにより

方法

が、私はこれを解決した定義されていない：それはエラーを受け取り

/* CHILD COMPONENT DEFINITION ABOVE */ 

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

をしかし、そのソリューションは本当にないです私は物事を働かせる方法です。ラップされたコンポーネントのものと一緒に使用したいアクション作成者に私のHOCをマージさせる方法はありますか？あるいは、私はこれについて新しい方法を見つけなければならないだろうか？

TLDR： HOCアクション作成者を使用するコンポーネントは、子コンポーネントも含めてラップします。 HOCのアクションクリエイターは蹴られ、決して通過しません。

Answer 1

例に問題があるようです。

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

    // ... 

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

あなたのEnhancerがconnect EDになることはありませんので、ごHOCから2回INGのreturnです。

これはあなたの例の誤植ですか？または、コード内に同じ問題がありますか？それが実際にあなたが見ている問題を引き起こすからです。