Cannot use connect function from react-redux - reactjs

Question

I've been trying to use redux with the appbar component from the material-ui. But couldn't properly use the connect function.
Error message "Cannot call a class as a function" is being displayed in the console.
I'm using react 16.1.1 with redux 3.7.2 and react-redux 5.0.6
Let me know how to use the connect function in this context.
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import {connect} from 'react-redux';
import * as dataTableAction from '../actions/dataTableAction';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu';
const styles = theme => ({
root: {
width: '100%'
},
flex: {
flex: 1
},
menuButton: {
marginLeft: -12,
marginRight: 20
}
});
function ButtonAppBar(props) {
const { classes } = props;
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton className={classes.menuButton} color="contrast" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography type="title" color="inherit" className={classes.flex}>
Home
</Typography>
<Button color="inherit"
onClick={this.props.dispatch(dataTableAction.createDataTable(this.state.dataTable))}>
Change state
</Button>
</Toolbar>
</AppBar>
</div>
);
}
ButtonAppBar.propTypes = {
classes: PropTypes.object.isRequired
};
function mapStateToProps(state, ownProps) {
return{
dataTable: state.dataTable
}
}
export default withStyles(styles)(connect(mapStateToProps))(ButtonAppBar);

Answer 1

You need to inject the styles before calling connect
const styledComponent = withStyles(styles)(ButtonAppBar);
export default connect(mapStateToProps)(styledComponent);
you can also use the compose:
import compose from 'recompose/compose';
export default compose(
withStyles(styles),
connect(mapStateToProps, null)
)(ButtonAppBar);
Check out React Material UI - Export multiple higher order components for more info

Answer 2

Without Compose or recompose, you can use this below
export default withStyles(styles)(connect(mapStateToProps) (ButtonAppBar));