React Material UI - Export multiple higher order components

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?

Maybe it is time to pull out Drawer into a presentational component, and pass “open” and “docked” as props to it? That way you can keep your connected component away from having to deal with styles... On the other hand it can be annoying to write wrappers like that every time you use a material-ui components. — SenhorLucas, Nov 05 '18 at 05:50

Alex Moleiro · Answer 1 · 2018-06-20T21:35:09.040

71

Just try this

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

Where App is your component. It works fine for me.

edited Jun 20 '18 at 21:35

answered May 07 '18 at 12:27

Alex Moleiro

1,166
11
13

Excellent! For a simple setup using two functions connected to component. For more than two it's better `recompose`. – Ulises Vargas De Sousa Oct 02 '18 at 23:47
Just incase someone doesn't know what mapDispatchToProps means (like myself) https://stackoverflow.com/questions/39419237/what-is-mapdispatchtoprops – rotimi-best Jan 25 '19 at 09:30
Yes, yes and yes! – JAC2703 Mar 14 '19 at 15:25

Ken Gregory · Answer 2 · 2017-12-21T16:59:19.420

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

The AppFrame component link is returning a 404. @kengregory can you update the answer to include a successful link? — robskrob, Dec 21 '17 at 15:26
@robertjewell done. Linked a version from a specific commit so that it remains valid. — Ken Gregory, Dec 21 '17 at 17:00

score 13 · Answer 3 · answered Aug 16 '17 at 08:18

13

Without recompose or compose:

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

answered Aug 16 '17 at 08:18

storm_buster

7,362
18
53
75

what is reduxConnector? – rotimi-best Jan 23 '19 at 17:15
Look at the OP question – storm_buster Jan 23 '19 at 19:03

score 10 · Accepted Answer · answered Aug 16 '17 at 04:46

10

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.

answered Aug 16 '17 at 04:46

ssuhat

7,387
18
61
116

score 2 · Answer 5 · answered Oct 08 '19 at 21:15

2

This works perfect for me

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

answered Oct 08 '19 at 21:15

SummmerFort

369
3
8

score 0 · Answer 6 · answered May 11 '18 at 11:28

0

You may use this below. As both withStyles and connect were higher order components

export default withStyles(styles, {name: 'Cart'})(connect(mapStateToProps, mapDispatchToProps), Cart);

answered May 11 '18 at 11:28

Jeeva

1,550
12
15

score 0 · Answer 7 · answered Aug 29 '19 at 14:50

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

React Material UI - Export multiple higher order components

7 Answers7

Linked