Use connect on HOC compoennts

Is there any way one could use connect on HOCs and fetch a data from store?

import React from 'react';
import {connect} from 'react-redux';

function withCurrentUser(Component) {
  return function(...props) {
    return <Component currentUser={/* Pass current user fetched from store here */} {...props} />
  }
}

function mapStateToProps(state) {
  return {
    currentUser: state.user
  }
}

export default connect(mapStateToProps)(withCurrentUser);

[markerikson]

Not written that way, since connect expects an actual component type as the second function’s parameter. However, this should work:

import {compose} from "redux";
import {connect} from "react-redux";

const composedHoc = compose(
    connect(mapStateToProps),
    withCurrentUser
);

export default composedHoc;

At least, I think that will work. I know composing HOCs works in general, just not sure on the exact syntax. Hopefully that at least points you in a useful direction.

[foadk]

It’s a bit old, but you could achieve this with a little modification of your code:

import React from 'react';
import {connect} from 'react-redux';

function withCurrentUser(Component) {
  function yourFunction(...props) {
    return <Component currentUser={/* Pass current user fetched from store here */} {...props} />
  }
  return connect(mapStateToProps)(yourFunction);
}

function mapStateToProps(state) {
  return {
    currentUser: state.user
  }
}

export default withCurrentUser;