HOC POC vs Redux

HOC all in one.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { loadAccountGraph } from 'redux/actions'
import { InlineLoader, ConditionalRender } from 'components'
import {
  accountIdSelector,
  accountLoadingSelector,
  accountErrorSelector
} from 'redux/selectors'
import request from 'superagent-bluebird-promise'

export default function withAccountId (WrappedComponent) {
  return class extends React.Component {
    constructor (props) {
      super(props)
      this.loadAccount = ::this.loadAccount 
    }

    async componentWillMount () {
      this.setState({loading: true})
      await this.loadAccount()
    }

    subdomain_label(){
      try {
        return window.location.host.split('.')[0]
      } catch (e) {
        return null
      }
    }

    async loadAccount(){
      try{
        const subdomain_label = this.subdomain_label()
        const query = this.query({subdomain_label})
        const result = await request
        .post('/graph')
        .send({ query })
        .promise()
        .then(x => JSON.parse(x.text))
  
        const {
          _id,
          facebook_ad_account: {
            ad_account_id,
            appSecretProof,
            impressions,
            fb_token,
          },
          logo_path,
          name,
          agentCount,
          activeCampaignCount,
        } = result.data.accountOne
        
  
        this.setState({
          accountId: _id,
          appsecret_proof: appSecretProof,
          impressions: impressions,
          fb_ad_account_id: ad_account_id,
          fb_token: fb_token,
          loading: false,
          error:null
        })

      }catch(error){
        this.setState({
          loading: false,
          error
        })
      }
     
    }

    query({ subdomain_label }){
      return  `{
        accountOne(filter:{sub_domain:{label: "${subdomain_label}"}}) {
          name
          _id
          created_date
          facebook_ad_account{
            ad_account_id
            appSecretProof
            fb_token
            impressions
          }
          logo_path
          activeCampaignCount
          agentCount
        }
      }`  
    }

    async componentWillReceiveProps (nextProps) {
      if(!this.state.accountId){
        await this.loadAccount()
      }
    }

    render () {
      const {accountId, loading, error} = this.state

      return (
        <span>
          <InlineLoader loading={loading} />
          <ConditionalRender visible={!loading && !error && accountId}>
            <WrappedComponent denim_account_id={accountId} {...this.props} />;
          </ConditionalRender>
          <ConditionalRender visible={!loading && error}>
            <div style={{ color: 'red', margin: '20px', width: 'auto' }}>
              Unable to reach Server. {error}
            </div>
          </ConditionalRender>
        </span>
      )
    }
  }
}

Redux dispatch.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { loadAccountGraph } from 'redux/actions'
import { InlineLoader, ConditionalRender } from 'components'
import {
  accountIdSelector,
  accountLoadingSelector,
  accountErrorSelector
} from 'redux/selectors'

export default function withAccountId (WrappedComponent, selectData) {
  return @connect(
    state => ({
      accountId: accountIdSelector(state),
      loading: accountLoadingSelector(state),
      error: accountErrorSelector(state)
    }),
    { loadAccountGraph }
  )
  class extends React.Component {
    constructor (props) {
      super(props)
    }

    componentWillMount () {
      this.props.loadAccountGraph()
    }

    componentWillReceiveProps (nextProps) {
      if (!nextProps.accountId) {
        this.props.loadAccountGraph()
      }
    }

    render () {
      const { loading, error, accountId } = this.props

      return (
        <span>
          <InlineLoader loading={loading} />
          <ConditionalRender visible={!loading && !error && accountId}>
            <WrappedComponent denim_account_id={accountId} {...this.props} />;
          </ConditionalRender>
          <ConditionalRender visible={!loading && error}>
            <div style={{ color: 'red', margin: '20px', width: 'auto' }}>
              Unable to reach Server. {error}
            </div>
          </ConditionalRender>
        </span>
      )
    }
  }
}