React Redux use HOC with connected component

Question

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 1

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

Answer 2

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

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

---

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

Answer 3

Here is a simple example 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

Answer 4

I use and like the same approach that @The Reason mentioned. The only problem here is that if you map your actions you won't have dispatch() available.

The way how I managed to make it work in case 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 accepting an action to be dispatched.