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

Question

我正在为我的前端应用程序使用 React Redux 和 Thunk。我已经使用 ReactTable 来呈现 table 视图。 ReactTable 接受列和数据作为道具。因为我有来自 graphQL 服务器的数据，所以我必须调用以获取数据。所以我有一个从服务器获取数据的操作，我正在使用 thunk 为该操作进行延迟调度。现在的问题是，因为我的 headers 和 table 数据来自我的操作，该操作位于组件之外的单独文件中，我想在 header 内部访问调度，因为我有呈现自定义单元格，其中我有删除我的 table 行的图标，我想在删除任何项目后分派 getData 操作，以便我的 table 更新我如何在我不能访问的非组件文件中访问分派呼叫连接 ?

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

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

Passing Dispatch to a non component that sets columns of ReactTable?

reactjs

asynchronous

redux

redux-thunk

react-table