Передача Dispatch не компоненту, который устанавливает столбцы ReactTable?
Я использую React Redux и Thunk для своего внешнего приложения. Я использовал ReactTable для визуализации табличных представлений. ReactTable принимает столбцы и данные как свойства. Поскольку у меня есть данные, поступающие с сервера graphQL, я должен вызвать для получения данных. Итак, у меня есть действие, которое получает данные с сервера, и я делаю отложенную отправку для этого действия с помощью thunk. Теперь проблема в том, что мои заголовки и данные таблицы поступают из моего действия, которое находится в отдельном файле, отличном от компонента, и я хочу получить доступ к диспетчеризации прямо внутри моего заголовка, потому что я визуализировал пользовательские ячейки, где у меня есть значки для удаления строк таблицы и Я хочу отправить действие getData после удаления любого элемента, чтобы моя таблица обновлялась, как я могу получить доступ к отправке в некомпонентном файле, где я не могу вызвать соединение?
Ответы 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 с отправкой в некомпонентном файле, в чем проблема? вы можете помочь с этим?
Это то, что mapDispatchToProps делает с кодом TableContainer, который я опубликовал. Вы можете использовать fetchTableData внутри компонента Table, и вы можете передать функцию Header и использовать ее там.
какой файл в данном случае является некомпонентным? вы можете разместить код?