Header.js

import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import resources from '../../store/resources'
import { HeaderBar, HeaderContent, Top, Bottom } from './styled'
import { isPristine, isLoading, hasLoadError } from '@zup-next/redux-resource'

const Loading = () => <HeaderBar><HeaderContent>Loading...</HeaderContent></HeaderBar>

const Error = () => <HeaderBar><HeaderContent>Error!</HeaderContent></HeaderBar>

const Content = ({ profile, balance }) => (
  <HeaderBar>
    <HeaderContent>
      <Top>{profile.name} {profile.lastname}</Top>
      <Bottom>{profile.email}</Bottom>
    </HeaderContent>
    <HeaderContent>
      <Top>Saldo disponível:</Top>
      <Bottom>${balance}</Bottom>
    </HeaderContent>
  </HeaderBar>
)

class Header extends PureComponent {

  componentDidMount() {
    const { loadProfile, loadWallet } = this.props
    loadProfile()
    loadWallet()
  }

  render() {
    const { profile, wallet } = this.props

    if (isPristine(profile) || isPristine(wallet)) return null
    if (isLoading(profile) || isLoading(wallet)) return <Loading />
    if (hasLoadError(profile) || hasLoadError(wallet)) return <Error />

    return <Content profile={profile.data} balance={wallet.data.balance} />
  }

}

const mapStateToProps = ({ wallet, profile }) => ({ wallet, profile })
const actions = {
  loadWallet: resources.wallet.actions.load,
  loadProfile: resources.profile.actions.load,
}

export default connect(mapStateToProps, actions)(Header)