CODEWITHSUNDEEP
javascriptexportreact-reduxmaterial-ui
stackovermat
stackovermat

Reputation: 435

JavaScript export 2 functions

I'm using React, Redux and now trying to include Material-UI. The Reduct and the Matrial-UI libs are showing example code that has an export at the end.

Redux:

export default connect(mapStateToProps, actions)(myComponent)

Material-UI:

export default withStyles(styles)(myComponent);

When I'm trying to bring both exports together, I have to get rid the default. So I thought it should look like this

This does not work:

export {
  connect(mapStateToProps, actions)(myComponent),
  withStyles(styles)(myComponent)
}

Error:

"Syntax error: Unexpected token, expected , (120:15)
       export {connect(mapStateToProps, actions)(myComponent)}
                      ^

This doesn't work: I tried to name the function, but then the function wasn't called, for some reasons I don't know.

import * as myConnect from 'react-redux'
...
export const connect = myConnect.connect(mapStateToProps, actions)(View)

I don't know what is happening 'under the hood' so I'm stuck. Any help is appreciated :-)

EDIT I haven't found a solution yet but I got around the problem. I split the component (myComponent) into an extra file. The design is event better like that, now it distinguishes between pure components and containers.

Upvotes: 0

Views: 115

Answers (3)

connect2Coder
connect2Coder

Reputation: 1130

There is another solution that a lot of people will need at one point to build HOC (Higher order component). I will suggest using Recompose utility (if you are ok to add another package to your project). Here is a link to great article about it on medium.

So if I will be writing your code here is how I will write to build HOC:

    import compose from 'recompose/compose';

     //...your component code here

    export default compose(withStyles(styles), 
                           connect(mapStateToProps, actions))(myComponent);

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074305

Make them named exports:

export const myConnect = connect(mapStateToProps, actions)(myComponent);

export const myStyles = withStyles(styles)(myComponent);

Then use named imports:

import {myConnect} from './yourscript';

Upvotes: 0

Nicholas Tower
Nicholas Tower

Reputation: 84982

{
  connect(mapStateToProps, actions)(myComponent),
  withStyles(styles)(myComponent)
}

This isn't a valid object; you're missing the keys.

{
    myConnectedComponent: connect(mapStateToProps, actions)(myComponent),
    myStyledComponent: withStyles(styles)(myComponent)  
}

Upvotes: 0

Related Questions