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

Question

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

我想从我的 'actions' 代码中分派一个动作，它最终应该在嵌套组件上调用一个函数。到目前为止，我只是通过分派动作并将它们捕获在工作正常的 reducer 中来简单地修改状态。

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

我考虑过引入一些新的 'exportRequested' 状态标志并在 reducer 中设置它，然后在嵌套组件中使用 componentDidReceiveProps。我也一直在研究 'connect' 的想法，就它允许我公开函数并将其连接到商店而言，这似乎是正确的，但我似乎无法连接点并弄清楚如何调用它来自减速器。有什么方法可以分派一个动作并直接在嵌套组件中捕获它吗？

一些代码：

容器：

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

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

Invoking functions on nested components in react redux

nested

connect

reactjs

redux