hoc component in react native and redux?

Question

i want to show spinner when user requesting Api call and i passed each component into higher order component to check is requesting or not if requesting show the spinner otherwise not

but here i getting error that says cannot call class as function

//-------------Hoc Component

HOC=component=>class extends React.component{

  render(){
    (return <component {...props} {...state}/>)}
  }
}

export default connect(mapStateToProps)(HOC)

//----------login component

export default HOC(connect(mapStateToProps,{actions})(Login))

Without HOC it is working fine but with HOC getting error. Please let me know the solution that how to connect two higher order component

Answer 1

Try this code

const HOC = WrappedComponent => {
  class abc extends Component {
    render () {
      return (
        <WrappedComponent {...this.props} {...this.state} />
      );
    }
  }

  const mapStateToProps = state => ({ state });

  const mapDispatchToProps = dispatch => bindActionCreaters({..actions}, dispatch);
  return connect(mapStateToProps, mapDispatchToProps)(abc);
}

export default compose(
  HOC,
  connect(mapStateToProps)
)(Login);