Réagir Matériel de l'INTERFACE utilisateur - Export multiple supérieur de l'ordre des composants

Question

Je suis bloqué sur l'exportation de matériel-l'interface utilisateur de styles avec redux connecteur. Voici mon 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

J'ai essayé:

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)".

Toute solution?

Answer 1

Juste essayer ce

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

Lorsque l'App est votre composant. Il fonctionne très bien pour moi.

Answer 2

Jetez un oeil à la façon dont elle est traitée dans le matériau d'interface utilisateur docs du site, en particulier dans le AppFrame composant:

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

Ils sont à l'aide de recomposer pour ce faire.

Donc dans votre cas, il serait:

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

Sans recompose ou compose:

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

Answer 4

installez npm install recompose ou yarn add recompose

et sur votre section d'exportation

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

et j'ai oublié d'exporter mon magasin.

Answer 5

Vous pouvez utiliser ce ci-dessous. Comme les deux withStyles et connecter étaient d'ordre supérieur composants

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