2

I have an application in which I have an export feature. if the user clicks on the menu 'export', I will call a function in my export store and get the data and export it into a Excel file. I am using the library XLSX for exporting and I wanted to use code splitting to have lazy loading mechanism for loading this dependency.

    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));

as I read the article on react loader library, I see that we can wrap out component into loader:

import Loadable from 'react-loadable';

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

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

but in my case, I would like to load the function in my store and not the whole component. how can I achieve this?

Afflatus
  • 933
  • 1
  • 12
  • 39

0 Answers0