6

I am trying to make use of Material-UI v1 with stajuan's Redux-Saga Login template shown here. So, I want to merge the export default thing of those two, in other words combine two functions for exporting the default class:

import React, {Component} from 'react';
import { connect } from 'react-redux';
import { withStyles, createStyleSheet } from 'material-ui/styles';

// Redux
function select (state) {
    return {
    data: state
    }
}

// Material UI v1
const styleSheet = createStyleSheet(theme => ({
    // ...
}));

// Class to be exported
class Login extends Component {
    // ...
    render () {
        // ...
    }

}

// H O W   T O   M E R G E   T H O S E ? ? ?
// export default connect(select)(Login);
// export default withStyles(styleSheet)(Login);

The last two commented-out lines of the code above are the statements to be combined in my case.

ssuhat
  • 7,387
  • 18
  • 61
  • 116
vahdet
  • 6,357
  • 9
  • 51
  • 106
  • 1
    See my answer on this: https://stackoverflow.com/questions/45704681/react-material-ui-export-multiple-higher-order-components – Ken Gregory Aug 16 '17 at 04:51

2 Answers2

7

you need to install npm install recompose or yarn add recompose

and on your export section

export default compose(
    withStyles(styles, {
        name: 'App',
    }),
    connect(),
)(AppFrame);

or you can do:

export default withStyles(styles)(connect(select)(Cart));

Adam Kipnis
  • 10,175
  • 10
  • 35
  • 48
ssuhat
  • 7,387
  • 18
  • 61
  • 116
4

You will be able to access with the key

this.props.domain

Add below line to export your class

const mapStateToProps = state => {
    return { domain : 'yourdomain.com'
    }
}
export default withStyles(styles)(connect(mapStateToProps)(Login));
Pranav
  • 41
  • 3