将 Dispatch 传递给设置 ReactTable 列的非组件?
Passing Dispatch to a non component that sets columns of ReactTable?
我正在为我的前端应用程序使用 React Redux 和 Thunk。我已经使用 ReactTable 来呈现 table 视图。 ReactTable 接受列和数据作为道具。因为我有来自 graphQL 服务器的数据,所以我必须调用以获取数据。所以我有一个从服务器获取数据的操作,我正在使用 thunk 为该操作进行延迟调度。现在的问题是,因为我的 headers 和 table 数据来自我的操作,该操作位于组件之外的单独文件中,我想在 header 内部访问调度,因为我有呈现自定义单元格,其中我有删除我的 table 行的图标,我想在删除任何项目后分派 getData 操作,以便我的 table 更新我如何在我不能访问的非组件文件中访问分派呼叫连接 ?
您可以将 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 状态中删除已删除的行。
我正在为我的前端应用程序使用 React Redux 和 Thunk。我已经使用 ReactTable 来呈现 table 视图。 ReactTable 接受列和数据作为道具。因为我有来自 graphQL 服务器的数据,所以我必须调用以获取数据。所以我有一个从服务器获取数据的操作,我正在使用 thunk 为该操作进行延迟调度。现在的问题是,因为我的 headers 和 table 数据来自我的操作,该操作位于组件之外的单独文件中,我想在 header 内部访问调度,因为我有呈现自定义单元格,其中我有删除我的 table 行的图标,我想在删除任何项目后分派 getData 操作,以便我的 table 更新我如何在我不能访问的非组件文件中访问分派呼叫连接 ?
您可以将 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 状态中删除已删除的行。