在React Redux中调用嵌套组件的函数

Question

很抱歉，如果这个问题表现出对反应范式缺乏理解，我怀疑它确实如此，但我对这项技术非常陌生。

我想从我的“动作”代码中分派一个动作，该代码最终应调用嵌套组件上的函数。到目前为止，我只是通过调度操作并在减速器中捕获它们来修改状态，这工作得很好。

我正在开发一个 portlet，作为更广泛框架的一部分，我可以在操作中捕获 onExport() 消息。从这里我不知道调用嵌套组件的最佳方法（我需要访问嵌套组件中的内部 ag-grid 来导出它）。

我考虑过引入一些新的“exportRequested”状态标志并在reducer中设置它，然后在嵌套组件中使用componentDidReceiveProps。我也一直在研究“连接”的想法，这似乎是正确的，因为它允许我公开该函数并将其连接到商店，但我似乎无法连接这些点并弄清楚如何从减速机。有没有某种方法可以分派一个动作并直接在嵌套组件中捕获它？

一些代码：

容器：

import {initData} from '/actions';

export class MainComponent extends PureComponent {
  static propTypes = {
    initData: func.isRequired,
    data: array.isRequired,
  };

  static defaultProps = {
    data: [],
  };

  componentDidMount() {
    this.props.initData();
  }

  render() {
    const { data } = this.props;
    return (
      <div>
        <ChildGrid data={data} />
      </div>
    );
  }
}

export default connect(
  state => ({
    data: getData(state),
  }),
  { initData }
)(MainComponent);

嵌套网格：

export class ChildGrid extends PureComponent {

  static propTypes = {
    data: array.isRequired,
  };

  static defaultProps = {
    data: [],
  };

  exportData() {
    // HOW TO MESSAGE THIS FROM ACTIONS. I want to call DataGrid.gridApi.exportAsCsv()
  }

  render() {
    const { data } = this.props;
    return (
      <div>
        <DataGrid
          rowData={data}
        />
      </div>
    );
  }
}

Answer 1

您想到了问题的正确解决方案，通过在 redux 存储中创建状态标志，然后监听嵌套组件中该属性的更改。不幸的是，在 Redux 中我们无法监听 Redux 存储的特定事件或特定状态属性更改。

这样的解决方案的实现如下：

ChildGrid.jsx

class ChildGrid extends PureComponent {

  static propTypes = {
    data: array.isRequired,
  };

  static defaultProps = {
    data: [],
  };

  componentWillReceiveProps(newProps) {
      if (newProps.exportRequested) {
          this.exportData();
      }
  }

  exportData() {
    DataGrid.gridApi.exportAsCsv();
  }

  render() {
    const { data } = this.props;
    return (
      <div>
        <DataGrid
          rowData={data}
        />
      </div>
    );
  }
}

const mapStateToProps = (state) => {
    return {
        reduxExportRequested: state.exportRequested
    };
};

export default connect(mapStateToProps)(ChildGrid);