I refer to this part of the official React tutorial (Convention: Maximizing Composability):
// connect is a function that returns another function
const enhance = connect(commentListSelector, commentListActions);
// The returned function is a HOC, which returns a component that is connected
// to the Redux store
const ConnectedComment = enhance(CommentList);
How should we implement the connect() function?
Conceptually HOC connect is something like this:
function connect(mapStateToProps, mapDispatchToProps) {
return function (WrappedComponent) {
return class extends React.Component {
render() {
return (
<WrappedComponent
{...this.props}
/>
)
}
}
}
}
How you can see, it's a function that return another function.
At first call connect get 2 arguments
const enhance = connect(commentListSelector, commentListActions);
At the second it get Component which we return in connect function
const ConnectedComment = enhance(CommentList);
But not only component, we return connect with new props which we get from redux - so it's approach how to get data from redux, look at more detailed example (if it's not enough for you, you can check link in a comment above):
function connect(mapStateToProps, mapDispatchToProps) {
return function (WrappedComponent) {
return class extends React.Component {
render() {
return (
<WrappedComponent
{...this.props}
{...mapStateToProps(store.getState(), this.props)}
{...mapDispatchToProps(store.dispatch, this.props)}
/>
)
}
}
}
}
For me more useful and convenient is react-hook pattern, check useSelector and useDispatch methods to get data from redux component to react. It's simplier, connect a legacy approach and can be useful only with Class components.