React-redux: Use connect on HOC compoennts

[farskid]

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.

[farskid]

@markerikson That helped a lot! thanks 👍 But it is still hard to manage props such as dispatch passed to wrapped components and deal with unknown prop warning.

[markerikson]

You can certainly flip the order of composition so that the connect wrapper is inside the withCurrentUser wrapper. Also, you may want to try binding specific action creators so that they become known props, instead of skipping the mapDispatch argument. See http://blog.isquaredsoftware.com/2016/10/idiomatic-redux-why-use-action-creators/ for some related thoughts.

[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;

[BradyEdgar94]

Also a bit late but here is my solution:

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

const Container = Comp => {
  const Wrapper = props => (
    class extends React.Component {
      render () {
        return <Comp {...this.props} />
      }
    }
  )

  return connect(mapStateToProps)(Wrapper());
}

function mapStateToProps ({ myValue }) {
  return { myValue }
}

export default Container

[barisusanmaz]

@BradyEdgar94 @markerikson All redux actions are passing into wrapped component when connect is used in hoc. May this behaviour be prevented?

[markerikson]

@barisusanmaz : I don't understand the question. One of the points of connect is to take whatever action creators you've provided, and turn those into props for the component you've provided.

[yuzhakovvv]

All suggested solutions didn't work for us. Check the error below. We figured out that the problem was in version 7.0.3. Roll back to 5.0.1 fixed everything.

[markerikson]

@yuzhakovvv : if you're seeing that error, please make sure that you have _exactly_ matching versions of React and ReactDOM in your app, and that you're not pulling in any other versions of React anywhere.

[yuzhakovvv]

@markerikson versions match:

But there are two versions of React. Actually nowadays it's hard to prevent this.