Передача Dispatch некомпоненту, который устанавливает столбцы ReactTable?

Question

Передача Dispatch некомпоненту, который устанавливает столбцы ReactTable?

Я использую React Redux и Thunk для своего внешнего интерфейса. Я использовал ReactTable для рендеринга табличных представлений. ReactTable принимает столбцы и данные в качестве реквизита. Так как у меня есть данные, поступающие с сервера GraphQL, я должен позвонить для получения данных. Итак, у меня есть действие, которое получает данные с сервера, и я делаю отложенную отправку для этого действия, используя thunk. Теперь проблема в том, что мои заголовки и данные таблицы поступают из моего действия, которое находится в отдельном файле, отличном от компонента, и я хочу получить доступ к диспетчеризации прямо в моем заголовке, потому что я создал пользовательские ячейки, где у меня есть значки для удаления строк таблицы и Я хочу отправить действие getData после удаления любого элемента, чтобы моя таблица обновлялась. Как я могу получить доступ к отправке в некомпонентном файле, где я не могу вызвать connect?

0

reactjs asynchronous redux react-table thunk

Источник

user5526187 19 окт '18 в 21:05

1 ответ

Решение

Другие вопросы по тегам reactjs asynchronous redux react-table thunk

user3915006 19 окт '18 в 22:34 2018-10-19 22:34 · Accepted Answer · 2018-10-19 22:34

Вы можете пройти вниз 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.