Cannot use connect function from react-redux

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

score 5 · Accepted Answer · answered Nov 30 '17 at 08:25

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

score 2 · Answer 2 · answered May 11 '18 at 11:32

2

Without Compose or recompose, you can use this below

export default withStyles(styles)(connect(mapStateToProps) (ButtonAppBar));

answered May 11 '18 at 11:32

Jeeva

1,550
12
15

Cannot use connect function from react-redux

2 Answers2