高阶组件 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 被 child 覆盖，并且动作创建者：importantReduxAction 永远不会传递到我的 HOC 中。它收到以下错误：

method is undefined

我通过将方法传递到我的 child 组件解决了这个问题，如下所示：

/* CHILD COMPONENT DEFINITION ABOVE */

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

但是这个解决方案并不是我想要的那样。有没有办法让我的 HOC 合并到它想要与包装组件的动作创建者一起使用的动作创建者中？还是我必须找到解决这个问题的新方法？

TLDR: 使用动作创建器的 HOC 组件包装了也有一个的 child 组件。 HOC action creator 被踢到限制并且从未通过。

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

在我的包装组件中，我像这样设置我的 mapDispatchToProps：

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

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

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

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

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

Higher Order Component redux dispatch being overwritten by wrapped component redux dispatch

reactjs

redux

react-redux

es6-class

higher-order-components