mtwallet mtwallet - 3 days ago 6
React JSX Question

React Redux use HOC with connected component

I am in the middle of my first React Native project. I would like to create a HOC that deals purely with syncing data from an api. This would then wrap all my other components.

If I am correct my

DataSync
component would enhance all other components by doing the following in the export statement:

export default DataSync(SomeOtherComponent);


The concept I am struggling with is that
SomeOtherComponent
also depends on the React Redux Connect method for retrieving other redux state. My question is how can I use both together? Something like this?

export default DataSync(connect(mapStateToProps, mapDispatchToProps)(SomeOtherComponent));


I may have completely misunderstood the concept here so I would really appreciate some pointers

EDIT

To explain further:

My DataSync HOC would purely handle the syncing of data between the app and would be the top level component. It would need access to auth state and would set the data in Redux (in this case orders) for all other components.

Components nested within the DataSync HOC need access to the retrieved data, routes and they in turn create state (orders) that must be synced back to the server periodically.

Answer

May be this is what you wanted:

DataSync.js

export default connect(mapStateToProps, mapDispatchToProps)(DataSync);

SomeOtherComponent.js

export default DataSync(connect(mapStateToProps, mapDispatchToProps)(SomeOtherComponent));

Use connect on your child components as well. Here is WHY

Comments