javascript - 当从其他组件分派(dispatch)操作时触发函数

Question

我正在开发一个reactjs应用程序并使用redux。我有两个组件。说出组件 A 和组件 B。在组件 A 中，我有一个表。当我单击任何行时，我会调度一个操作，并将该行的数据作为该操作的参数。每次我单击一行时，都会调度此操作。我想每当单击一行并调度该操作时就触发组件 B 中的一个函数。我该怎么做？

通常我们通过 Action 调度来改变reducer中的数据，然后使用该数据作为其他组件中的状态。但在这里，我想每当在组件 A 的表格中单击一行时，就触发组件 B 中的函数。

Answer 1

单击行时在 A 中调度一个操作，将 bool 值设置为 true。然后使用 mapStateToProps 在 Redux 状态更改时重新渲染组件。然后对 componentDidUpdate() 中所需的函数进行条件调用:

class B extends React.Component {
  componentDidUpdate() {
    const { rowClickedInAComponent } = this.props;
    if ( rowClickedInAComponent ) {
      functionToBeCalled();
    }
  }
  render() {
  }
}

const mapStateToProps = (state) => ({
  rowClickedInAComponent: rowClickedInAComponent
  // boolean here, you could pass any info such as which row was clicked
});

export default connect(mapStateToProps)(ListingPage);

如果您需要进一步说明，请发表评论。