CODEWITHSUNDEEP
javascriptreactjsreact-nativereduxreact-redux
David Rojo
David Rojo

Reputation: 2404

React native index.js with redux

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.

Upvotes: 0

Views: 961

Answers (3)

dermeck
dermeck

Reputation: 131

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

Upvotes: 1

Robsonsjre
Robsonsjre

Reputation: 1606

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'

Upvotes: 0

EnriqueDev
EnriqueDev

Reputation: 1247

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.

Upvotes: 0

Related Questions