JavaScript export 2 functions

Question

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.

connect2Coder · Accepted Answer · 2018-02-14 17:18:12Z

2

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

answered Feb 14, 2018 at 17:18

connect2Coder

1,1401 gold badge13 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nicholas Tower · Accepted Answer · 2017-09-17 10:31:10Z

0

{
  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)  
}

answered Sep 17, 2017 at 10:31

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

1 Comment

T.J. Crowder Over a year ago

While the OP could export an object, named exports probably make more sense.

T.J. Crowder · Accepted Answer · 2017-09-17 10:47:03Z

0

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

edited Sep 17, 2017 at 10:47

answered Sep 17, 2017 at 10:41

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Collectives™ on Stack Overflow

JavaScript export 2 functions

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related