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?