Question

我在我的前端应用程序中使用React Redux和Thunk。我已经使用ReactTable渲染表视图。 ReactTable接受列和数据作为道具。因为我有来自graphQL服务器的数据，所以我必须打电话来获取数据。因此，我有一个从服务器获取数据的操作，并且正在使用thunk延迟执行该操作。现在的问题是，因为我的标头和表数据来自我的操作，该操作位于组件之外的单独文件中，并且我想访问标头内部的调度，因为我渲染了自定义单元格，在其中有图标可以删除表行和我想在删除任何项目后分派getData操作，以便我的表更新如何访问无法调用connect的非组件文件中的分派？

Answer 1

您可以将fetchTableData传递给<Table> ，并将传递给<Header />组件。例如

<TableContainer />

const mapStateToProps = (state) => ({
    hasError: hasError(state),
    isLoading: isLoading(state),
    tableData: getTableData(state),
});

const mapDispatchToProps = {
  fetchTableData,
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Table);

<Table />

export default class Table extends Component {
    componentDidMount() {
        // fetches table and header data for the first time when Table mounts
        this.fetchTableData();
    }
    render() {
        return (
          <div>
            // passes the fetchTableData function to Header so it can 
            // refetch the data when something is deleted
            <Header fetchTableData={props. fetchTableData}/>
            <Body />
          </div>
        );
    }
}

您还可以考虑：

也将<Header />连接到状态并设置其on调度动作。
删除时不重新获取API中的所有数据。如果删除成功，只需调度一个操作即可从Redux状态中删除已删除的行。

将Dispatch传递给设置ReactTable列的非组件？

1 个答案: