title: How to connect a Higher-Order Component to a Redux store?
body: <p>Basically, I have an <code>AuthenticationHOC</code> which must get the redux state, check if a token exists and if it exists, render the wrapped component. If not, then dispatch an action to try and load the token from the localStorage. If this fails, redirect to the login page.</p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  import * as UserActions from '../../state/actions/user-actions';
  import * as DashboardActions from '../../state/actions/dashboard-actions';
  
  const mapStateToProps = state =&gt; {
    return {
      token: state.user.token,
      tried: state.user.triedLoadFromStorage,
    };
  };
  
  const _AuthenticationHOC = Component =&gt; props =&gt; {
    // if user is not logged and we 've not checked the localStorage
    if (!props.token &amp;&amp; !props.tried) {
      // try load the data from local storage
        props.dispatch(DashboardActions.getDashboardFromStorage());
        props.dispatch(UserActions.getUserFromStorage());
    } else {
      // if the user has not token or we tried to load from localStorage 
      //without luck, then redirect to /login
      props.history.push('/login');
    }
  
    // if the user has token render the component
    return &lt;Component /&gt;;
  };
  
  const AuthenticationHOC = connect(mapStateToProps)(_AuthenticationHOC);
  export default AuthenticationHOC;
  </code></pre>
  
  <p>then I tried to use this like this</p>
  
  <pre><code>const SomeComponent = AuthenticationHOC(connect(mapStateToProps)(HomeComponent));
  </code></pre>
  
  <p>but I always get an error marking exactly the line above.</p>
  
  <blockquote>
    <p><strong>TypeError: Object(...) is not a function</strong></p>
  </blockquote>
  
  <p>then I did a simplified version</p>
  
  <p>I replaced the code from my HOC to the most simple version</p>
  
  <pre><code>const _AuthenticationHOC = Component =&gt; props =&gt; {
    return &lt;Component {...props}/&gt;;
  };
  </code></pre>
  
  <p>and this doesn't work either. Then I removed the connect function from my HOC and just export this component and tada! ...works now!</p>
  
  <p>So I suspect that connect returns an object that can't be used as a HoC function. Is this correct? What could I do here?</p>