Using compose() and connect() together in React JS redux

Question

I am starting to develop a web application using React JS. I bought a theme from theme forest. In the theme, they are using compose like this in the component.

...Other code here  Login.propTypes = {       classes: PropTypes.shape({}).isRequired,       width: PropTypes.string.isRequired     };      export default compose(withWidth(), withStyles(themeStyles, { withTheme: true }))(Login); 

As you can see their code is using the compose at the end when exporting the Component. I cannot modify their built-structure. What I like to do now is I like to use connect feature of the react as well.

Normally connect is used in the place of compose. Now, if I want to use connect to work with the state of the application, how can I use it together with compose ?

Answer 1

const enhance = compose(     withRouter,     withStyles(styles, 'some style'),     connect(mapStateToProps, mapDispatchToProps),     ....  export default enhance(MyComponent); 

Answer 2

import {bindActionCreators} from 'redux'; import compose from 'recompose/compose'; import { connect } from 'react-redux'; ...Other code here function mapStateToProps(state) {     return {         //return state     } } function mapDispatchToProps(){     return bindActionCreators({         //actions     }, dispatch); } Login.propTypes = {     classes: PropTypes.shape({}).isRequired,     width: PropTypes.string.isRequired }; export default compose(withWidth(), withStyles(styles, {withTheme: true}), connect(mapStateToProps, mapDispatchToProps))(Login); 

I hope this solves your problem.