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

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


reactjs redux asynchronous redux-thunk react-table
person Waqar Ul Khaf    schedule 19.10.2018    source источник
comment
какой файл в данном случае является некомпонентным? вы можете разместить код?   -  person rubentd    schedule 20.10.2018

Ответы (1)


arrow_upward
0
arrow_downward

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

Вы также можете принять во внимание:

  1. Подключение <Header /> к состоянию и настройка его действий при отправке.
  2. Не извлекать все данные из API при удалении. Если удаление прошло успешно, просто отправьте действие для удаления удаленной строки из состояния Redux.
person Doug    schedule 19.10.2018
comment
Это не решает мою проблему. Мне нужно связать actionCreater с отправкой в ​​некомпонентном файле, в чем проблема? вы можете помочь с этим? - person Waqar Ul Khaf; 20.10.2018
comment
Это то, что mapDispatchToProps делает с TableContainer кодом, который я опубликовал. Вы можете использовать fetchTableData внутри Table компонента, а также передать функцию Header и использовать ее там. - person Doug; 21.10.2018