React Redux uses HOC with component connected

Question

I am in the middle of my first React Native project. I would like to create a HOC that deals exclusively with data synchronization with api. After that, all other components will be transferred.

If I am right, my DataSync component DataSync enhance all other components by following the export statement:

export default DataSync(SomeOtherComponent);

The concept I'm SomeOtherComponent with is that SomeOtherComponent also depends on the React Redux Connect method to retrieve another reduction state. My question is: how can I use both together? Something like that?

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

Perhaps I completely misunderstood this concept, so I would really appreciate some pointers

EDIT

Further clarify:

My DataSync HOC will cleanly handle data synchronization between the application and will be a top-level component. It will need access to auth state and will install data in Redux (in this case orders) for all other components.

The components embedded in the DataSync HOC need access to the extracted data, routes, and they, in turn, create a state (orders), which must be periodically synchronized with the server.

Answer 1

Perhaps this is what you wanted:

DataSync.js

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

SomeOtherComponent.js

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

Use connect for your child components. WHY WHY

Answer 2

Here is a simple example of how it works.

 const AppWrapper = MainComponent => class extends Component{ componentWillmount(){ this.props.fetchSomething() } componentDidUnmount(){ this.props.push('/') } render(){ return ( <div> {this.props.fetchedUsers === 'undefined' ? <div> Do somethig while users are not fetched </div> : <MainComponent {...this.props}/>} </div> ) } } const App = ({users}) => { // just example, you can do whatever you want return <div>{JSON.stringify(users)}</div> }; // mapStateToProps will be in HOC -> Wrapper // mapDispatchToProps will be in HOC -> Wrapper /* you may use DataSync as you want*/ export default connect(mapStateToProps, mapDispatchToProps)(AppWrapper(App)) 

Useful HOC link

Hope this helps you.

Update : correct typo

Answer 3

Yes, connect also HOC , and you can nest them arbitrarily, since HOC returns a component.

HOC(HOC(...(Component)...)) OK.

---

However, I think you might need to connect(...)(DataSync(YourComponent)) instead of DataSync(connect(...)(YourComponent)) so that DataSync also access state / props if necessary. It really depends on the use case.

Answer 4

I use and as the same approach that @The reason is mentioned. The only problem is that if you type in your actions, you will not have a send ().

How I managed to get it to work if someone is facing the same problem was the following.

 const ConnectedComponentWithActions = connect( () => { return {}; }, { myAction }, )(ViewComponent); export default connect( state => state, null, )(withPreFetch(firstLoadAction, ConnectedComponentWithActions)); 

Where withPreFetch(firstLoadAction, ConnectedComponentWithActions) is the HOC that takes the action to send.