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

【问题标题】：Passing Dispatch to a non component that sets columns of ReactTable?将 Dispatch 传递给设置 ReactTable 列的非组件？
【发布时间】：2019-03-24 18:58:59
【问题描述】：

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

【问题讨论】：

本例中的非组件文件是哪一个？你能发布一些代码吗？

标签： reactjs asynchronous redux redux-thunk react-table

【解决方案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 /> 连接到状态并设置其调度操作。
删除时不会从 API 重新获取所有数据。如果删除成功，只需派发一个操作即可从 Redux 状态中删除已删除的行。

【讨论】：

这并不能解决我的问题我需要将 actionCreater 与 dispatch 绑定在一个非组件文件中，这是问题吗？你能帮忙吗？
这就是 mapDispatchToProps 在我发布的TableContainer 代码上所做的。您可以在Table 组件中使用fetchTableData，也可以将函数传递给Header 并在那里使用。