Вы можете передать 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.