How to use a connected-to-Redux-Higher-Order-Component inside a Component which is also connected to Redux

Question

I am trying to wrap a Container which uses Redux with a HOC , which also uses Redux , taking me to the following error:

TypeError: Object(...) is not a function
> 112 | export default connect(mapStateToProps, mapDispatchToProps) (withRouter(withError(VeggieBuilder)))

I have been trying to figure it out on my own and I guess that the solution has something to do with the use of compose from redux when exporting either my HOC or my Container .

I will post the whole HOC here and just the container's exporting part right below the HOC block.

import React, {Fragment} from "react";
import Modal from "../../UI/Modal/Modal";
import { connect } from 'react-redux'
import * as actionCreators from  '../../../store/actions/indexActions'

const withError = WrappedComponent => {
    return props => {
        return<Fragment>
            <Modal show={props.error} modalCanceled={() => props.onResetError()}>
                {props.error && props.error}
            </Modal>
            <WrappedComponent {...props} />
        </Fragment>
    }
}

const mapStateToProps = state => {
    return {
        error: state.httpReqReducer.errorMessage
    }
}

const mapActionsToProps = dispatch => {
    return {
        onResetError: () => dispatch(actionCreators.resetError())
    }
}

export default connect(mapStateToProps, mapActionsToProps)(withError)

now the export part of my Container called VeggieBuilder

export default connect(mapStateToProps, mapDispatchToProps) (withRouter(withError(VeggieBuilder)))

If remove the connection with Redux on the export of my HOC the error disappears.

Thanks in advance to all.

If any additional info is needed here, I will edit the question accordingly.

Answer 1

You can modify your HOC this way:

import React, { Fragment } from "react";
import Modal from "../../UI/Modal/Modal";
import { connect } from 'react-redux'
import * as actionCreators from '../../../store/actions/indexActions'

const withError = WrappedComponent => {
  const wrappedComp = props => {
    return <Fragment>
      <Modal show={props.error} modalCanceled={() => props.onResetError()}>
        {props.error && props.error}
      </Modal>
      <WrappedComponent {...props} />
    </Fragment>
  }

  const mapStateToProps = state => {
    return {
      error: state.httpReqReducer.errorMessage
    }
  }

  const mapActionsToProps = dispatch => {
    return {
      onResetError: () => dispatch(actionCreators.resetError())
    }
  }

  return connect(mapStateToProps, mapActionsToProps)(wrappedComp);
}

export default withError;

Calling connect with mapState and mapDispatch will return a function that expects a react component as an argument.

So when you use export default connect(mapStateToProps, mapActionsToProps)(withError) note that withError is not a react component but instead it's a function that returns a react component.