React Redux use HOC with connected component
Solution 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
Solution 2
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 something 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
Solution 3
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.
Solution 4
I had a very straight forward use case. I wanted to connect my HOC with redux store. In short I wanted to wrap my HOC with redux connect
method.
// The HOC
const withMyHoc = (ReduxWrappedComponent) => props => <ReduxWrappedComponent {...props} />
// redux props
const mapStateToProps = (state) => ({});
const mapDispatchToProps = (dispatch) => ({});
// This is important
export default (WrappedComponent) =>
connect(
mapStateToProps,
mapDispatchToProps
)(withMyHoc(WrappedComponent));
There are two many answers in this thread. All of them helped me. Just putting down what actually worked in my case.
mtwallet
Updated on July 30, 2020Comments
-
mtwallet almost 4 years
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.
-
Dominic over 7 yearsyep that should work
-
kca over 3 yearsmaybe see also: Connect with HOC
-
-
mtwallet over 7 yearsthanks for the reply. So in essence which ever way I nest them determines the data the components inherit? This works just like any other component relationship?
-
Lyubomir over 7 yearscan you elaborate a little bit more on your question? DataSync only inherits from connect if it is nested in connect. Every nested HOC1 inherits from every outer HOC2,3,4.. above it. HOC3(HOC2(HOC1)) Now HOC1 inherits from HOC2 and HOC3.
-
Joe Lloyd over 6 yearsCan you do it with a connect decorator instead of this syntax?