Search code examples
javascriptreactjsreduxmaterial-uirecompose

Why I can't apply redux's connect with material-ui withStyles?


I'm trying to add withStyles() hook from material-ui in the redux container-component with connect() function via { compose } function from 'recompose' and get this error from recompose package:

TypeError: Function.prototype.apply was called on #, which is a object and not a function

I ask for any help, I have already spent too much time on this


import { withStyles } from '@material-ui/core/styles';
import { styles } from './styles';
import { compose } from 'recompose';
import { connect } from 'react-redux';

...

function mapStateToProps(state) {
  return {
    someVal: state.someVal,
  }
}

function mapDispatchToProps(dispatch) {
  return ({
    changeVal: () => {dispatch('CHANGE_VAL')}
  })
}

export default compose(
  withStyles(styles),
  connect(mapStateToProps, mapDispatchToProps)(App)
);


//if i do:

export default connect(mapStateToProps,mapDispatchToProps)(App)

//or:

export default withStyles(styles)(App)

//it's work. (just to clarify)


Solution

  • connect and withStyles are both HOC

    a higher-order component is a function that takes a component and returns a new component.

    So you need to wrap App inside withStyles and connect

    export default connect(mapStateToProps,mapDispatchToProps)(withStyles(styles)(App))