ES6 how to do multiple default exports

Question

I am still getting a hang of react+redux, and ES6. I am trying to implement socketio, and I come across the problem of having to export socketio connect with my redux's connect.

redux connect

export default connect(mapStateToProps, matchDispatchToProps)(UserList);

socketio connect

export default socketConnect(App);

Question What is the correct syntax to make them work together?

Answer 1

You can't have more than one default export.

Instead, use named exports.

// moduleName.js    

export const ConnectedUserList = connect(mapStateToProps, matchDispatchToProps)(UserList)

export const RealTimeApp = socketConnect(App);

Require the exports by name.

// otherModule.js
import { ConnectedUserList, RealTimeApp } from "./moduleName"

Answer 2

You can mix default export and named export.

export default ConnectedUserList = connect(mapStateToProps, matchDispatchToProps)(UserList)

export const RealTimeApp = socketConnect(App);

And after, you can import your exports :

import ConnectedUserList, { RealTimeApp } from "./moduleName"