Header.js

import React from 'react'
import ModalRepoForm from './ModalRepoForm'
import ReactAddonsUpdate from 'react-addons-update'
import Loader from 'halogen/PulseLoader'
import { Link } from 'react-router-dom'
import autobind from 'autobind-decorator'

import { connect } from 'react-redux'

import { bindActionCreators } from 'redux'
import * as HeaderActions from '../actions/header'

@autobind
class Header extends React.Component {
  componentDidMount() {
    const { actions } = this.props
    actions.getHeader()
  }

  addRepo(repo) {
    let data = ReactAddonsUpdate(this.state.data, { $push: [repo] })
    this.setState({ data: data })
  }

  render() {
    const { response, actions } = this.props

    let result = null;

    if (response.isFetching) {
      result = <Loader color="#286090" size="12px" margin="4px"/>;
    }

    if (!response.isFetching && response.headers) {
      const data = response.headers.map((repo) => {
        const url = `/web/regional_design/${repo.id}?object=repo`
        return (
          <Link key={ repo.id } className='btn btn-default mr15' to={ url }>{ repo.name }</Link>
        )
      })

      result = data;
    }

    if (!response.isFetching && response.error_message) {
      result = <span>Error: {response.error_message}</span>;
    }


    return (
      <div className="text-left top-header">
        <ModalRepoForm handleNewRepo={ actions.addRepo } />
        <div className='col-md-10'>
          { result }
        </div>
        <div className="clearfix"></div>
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => ({
  response: state.header
})

const mapDispatchToProps = (dispatch, ownProps) => ({
  actions: bindActionCreators(HeaderActions, dispatch)
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Header)