高阶组件redux调度被包装组件redux调度覆盖

Question

以下是高阶组件。 HOC专门与redux连接，以便访问其中一个动作创建者：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。

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被孩子覆盖了，而动作创建者：importantReduxAction，从未被传递到我的HOC中。它收到的错误是：

方法未定义

我通过将方法传递到我的子组件中解决了这个问题：

/* 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)
}

你从你的HOC开始两次returning，所以你的Enhancer永远不会被connected。

这只是你的例子中的拼写错误吗？或者你的代码中有同样的问题吗？因为那确实会引起你所看到的问题。

Answer 2

这里的问题是你需要在高阶组件中合并你的道具。 redux connect接受第三个参数，即函数（mergeProps）。该功能有三个参数。见这里的例子：

function mergeProps(stateProps, dispatchProps, ownProps) {
		return {
			...stateProps,
			...dispatchProps,
			...ownProps,
			actions: Object.assign({}, dispatchProps.actions, ownProps.actions)
		}
	}

在我的Wrapped Component中，我设置了mapDispatchToProps，如下所示：

function mapDispatchToProps(dispatch) {
	return {
	    actions: bindActionCreators({
	      ...myDefinedActionsForMyComponent,
	    }, dispatch)
	  }		
	}

在我的HOC中，我以相同的方式设置了mapDispatchToProps。您可以通过在HOC（更高阶组件）中实现mergeProp来解决您遇到的问题。如果您只是创建mergeProps函数和控制台记录这三个参数，您将看到值，并可以决定如何最好地加入它们。根据我的设置，我只需要对动作进行对象分配。你可能需要做类似的事情。

然后，连接在您的HOC中看起来像这样：

return connect(mapStateToProps, mapDispatchToProps, mergeProps)(Wrapper)