Реагировать на ленивую загрузку - PullRequest
Новая
       13

Реагировать на ленивую загрузку

0 голосов
/ 08 мая 2018

У меня есть приложение, в котором у меня есть функция экспорта. если пользователь нажимает на меню «экспорт», я вызову функцию в моем хранилище экспорта и получу данные и экспортирую их в файл Excel. Я использую библиотеку XLSX для экспорта, и я хотел использовать разбиение кода, чтобы иметь механизм отложенной загрузки для загрузки этой зависимости. 

    import React, { Fragment } from 'react';
    import { connect } from 'react-redux';
    import { translate, Trans } from 'react-i18next';
    import { exportAccounts } from '../../store/export';
    import { Button, Menu, Dropdown } from 'antd';

    const mapDispatchToProps = dispatch => ({
      exportAccounts: translator => dispatch(exportAccounts(translator)),
    });

    class MyComponent extends React.Component {
     handleMenuOnClick = e => {
        switch (e.key) {
          case 'export':
            this.props.exportAccounts(this.props.t);
            break;
          default:
        }
      };
      options = (
        <Menu onClick={this.handleMenuOnClick}>
          <Menu.Item key="export">
            <Trans i18nKey="52918">Export</Trans>
          </Menu.Item>
        </Menu>
      );

      render = () => {
        const { isSettingVisible } = this.state;
        const { columnsToShow, t } = this.props;

        return (
            <Dropdown overlay={this.options} trigger={['click']}>
              <Button icon="ellipsis">
                <Trans i18nKey="-1">More Options</Trans>
              </Button>
            </Dropdown>
        );
    }
     export default connect( mapDispatchToProps)(translate()(MyComponent));

Читая статью о библиотеке реагирующего загрузчика, я вижу, что мы можем заключить компонент в загрузчик: 

import Loadable from 'react-loadable';

const LoadableOtherComponent = Loadable({
  loader: () => import('./OtherComponent'),
  loading: () => <div>Loading...</div>,
});

const MyComponent = () => (
  <LoadableOtherComponent/>
);

но в моем случае я хотел бы загрузить функцию в моем магазине, а не весь компонент. как мне этого добиться?

...