React Material UI - Export multiple higher order components - reactjs

Question

I'm stuck on exporting material-ui styles with redux connector. Here is my code:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Drawer from 'material-ui/Drawer';
import { withStyles } from 'material-ui/styles';
import PropTypes from 'prop-types';
const mapStateToProps = state => ({});
const reduxConnector = connect(mapStateToProps, null);
const styles = theme => {
console.log(theme);
return ({
paper: {
top: '80px',
boxShadow: theme.shadows[9]
},
});
};
class Cart extends Component {
render() {
const { classes } = this.props;
return (
<Drawer
open
docked
anchor="right"
classes={{ paper: classes.paper }}
>
<p style={{ width: 250 }}>cart</p>
</Drawer>
);
}
}
export default withStyles(styles, {name: 'Cart'})(Cart);
export default reduxConnector(Cart); // I want to add this
I've tried:
export default reduxConnector(withStyles(styles))(Cart); // return Uncaught TypeError: Cannot call a class as a function
export default withStyles(styles, {name: 'Cart'})(reduxConnector(Cart)); // return Uncaught Error: Could not find "store" in either the context or props of "Connect(Cart)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Cart)".
Any solution?

Answer 1

Just try this
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(App));
Where App is your component.
It works fine for me.

Answer 2

Take a look at how it's being handled in the material-ui docs site, specifically in the AppFrame component:
export default compose(
withStyles(styles, {
name: 'AppFrame',
}),
withWidth(),
connect(),
)(AppFrame);
They're using recompose to do this.
So in your case, it would be:
import React, { Component } from 'react';
import compose from 'recompose/compose';
import { connect } from 'react-redux';
import Drawer from 'material-ui/Drawer';
import { withStyles } from 'material-ui/styles';
import PropTypes from 'prop-types';
const styles = theme => {
console.log(theme);
return {
paper: {
top: '80px',
boxShadow: theme.shadows[9],
},
};
};
const Cart = ({ classes }) =>
<Drawer open docked anchor="right" classes={{ paper: classes.paper }}>
<p style={{ width: 250 }}>cart</p>
</Drawer>;
const mapStateToProps = state => ({});
export default compose(
withStyles(styles, { name: 'Cart' }),
connect(mapStateToProps, null)
)(Cart);

Answer 3

Without recompose or compose:
Cart = withStyles(styles, {name: 'Cart'})(Cart);
export default reduxConnector(Cart);

Answer 4

install npm install recompose or yarn add recompose
and on your export section
export default compose(
withStyles(styles, {
name: 'App',
}),
connect(),
)(AppFrame);
and I forgot to export my store.

Answer 5

This works perfect for me
export default connect(mapStateToProps)((withStyles(styles)(ComponentNameToExport)));

Answer 6

You may use this below. As both withStyles and connect were higher order components
export default withStyles(styles, {name: 'Cart'})(connect(mapStateToProps, mapDispatchToProps), Cart);

Answer 7

Complete Component
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import ExpansionPanel from "#material-ui/core/ExpansionPanel";
import ExpansionPanelSummary from "#material-ui/core/ExpansionPanelSummary";
import ExpansionPanelDetails from "#material-ui/core/ExpansionPanelDetails";
import Typography from "#material-ui/core/Typography";
import ExpandMoreIcon from "#material-ui/icons/ExpandMore";
import { withStyles } from "#material-ui/core/styles";
import { connect } from "react-redux";
import { fetchPosts } from "../../store/actions/postActions";
import PropTypes from "prop-types";
const useStyles = theme => ({
root: {
marginLeft: 250,
marginRight: 10
},
heading: {
fontSize: "1rem",
fontWeight: theme.typography.fontWeightRegular
}
});
class SimpleExpansionPanel extends React.Component {
UNSAFE_componentWillMount() {
this.props.fetchPosts();
}
UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.newPost) {
this.props.postsa.unshift(nextProps.newPost);
}
}
render() {
const { classes } = this.props;
const postItem = this.props.postsa.map(post => (
<ExpansionPanel key={post.id}>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header">
<Typography className={classes.heading}>{post.title}</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>{post.body}</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
));
return <div className={classes.root}>{postItem}</div>;
}
}
SimpleExpansionPanel.propTypes = {
fetchPosts: PropTypes.func.isRequired,
postsa: PropTypes.array.isRequired,
newPost: PropTypes.object
};
const mapStateToProps = state => ({
postsa: state.postss.items,
newPost: state.postss.item
});
export default connect(
mapStateToProps,
{ fetchPosts }
)(withStyles(useStyles)(SimpleExpansionPanel));