React native index.js with redux

Question

I am very newbie with React and React native.

I have a folder with several components, I've been able to create an index.js file to export all components inside the folder, so in other components I can do:

# /components/OneComponent.js
...
export { OneComponent }

# index.js
import { OneComponent } from './components'
```

Now I am working with Redux, and I want to accomplish the same thing, but I don't know how to do it. In my component I export the component as follows:

# /component/OneComponent.js
export default connect(mapStateToProps, { myFunction})(OneComponent);

And it should be as follows as I guess

export { connect(mapStateToProps, { myFunction})(OneComponent) };

But it doesn't compile.

Have you tried export default connect(mapStateToProps, myFunction)(OneComponent); — Robsonsjre
– Robsonsjre, Commented May 23, 2017 at 13:59
Yes, If I do that, when I do import { OneComponent } from './components' it is undefined. — David Rojo
– David Rojo, Commented May 23, 2017 at 14:06

SynozeN Technologies · Accepted Answer · 2017-05-25 08:29:32Z

1

Just tested it out.

You can work around your error by assigning the result of the connect call to a const and then export that const afterward like so.

const comp1 = connect(mapStateToProps)(MyComponent);

export {comp1 as MyComponent};

edited May 25, 2017 at 8:29

SynozeN Technologies

1,3431 gold badge14 silver badges19 bronze badges

answered May 25, 2017 at 8:24

dermeck

1215 bronze badges

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

Comments

EnriqueDev · Accepted Answer · 2017-05-23 14:39:42Z

0

When exporting your components from an index you need to export them like this:

export {connect(mapStateToPops,mapDispatchToProps)(ComponentName)}

and then in your index.js: export * from 'YourComponentRoute

Remember that if you export as default you are exporting an instance of an unique object. If you export {} you are exporting a "copy" of an object.

answered May 23, 2017 at 14:39

EnriqueDev

1,2432 gold badges12 silver badges25 bronze badges

1 Comment

David Rojo Over a year ago

Hi, if I do this export in the component js file, I get a javascript error at the parenthesis of connect that says ", expected". export { connect(mapStateToProps, { getSchedules })(SchedulesScreen) };

Robsonsjre · Accepted Answer · 2017-05-23 18:43:42Z

0

I dont think the problem is the Redux, the import and export ES6 methods are messy. For example:

Example 1 (with export default):

When you export default something, you should not import with {}

## CORRECT
# /components/OneComponent.js
...
export default connect(mapStateToProps, { myFunction})(OneComponent);

# index.js
import AnyName from './components/OneComponent.js'

## WRONG
# /components/OneComponent.js
...
export default connect(mapStateToProps, { myFunction})(OneComponent);

# index.js
import { OneComponent } from './components/OneComponent.js'

Example 2 (without export default):

Try to name your object keys

##CORRECT
# /components/OneComponent.js
...
export { OneComponent: connect(mapStateToProps, { myFunction})(OneComponent) };

# index.js
import { OneComponent } from './components'

##WRONG
# /components/OneComponent.js
...
export { connect(mapStateToProps, { myFunction})(OneComponent) };

# index.js
//It wont find the key OneComponent on exported object
import { OneComponent } from './components'

edited May 23, 2017 at 18:43

answered May 23, 2017 at 14:33

Robsonsjre

1,57112 silver badges19 bronze badges

2 Comments

David Rojo Over a year ago

The first example is what I am doing right now. The second example doesn't work for me, I receive an error in the two dots that says ", expected" export { SchedulesScreen: connect(mapStateToProps, { getSchedules })(SchedulesScreen) };

David Rojo Over a year ago

Hi @Robsonsjre , I've created a github repo with the base code, could you check it? Thank you! github.com/davidrojo/test-import

Collectives™ on Stack Overflow

React native index.js with redux

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related