Workshop_v2.jsx

import React, { Component } from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Name from './Name.jsx';
import { fetchUserData } from '../../../actions/getUserActions';

class WorkShop extends Component {
  constructor(props) {
    super(props);

    this.state = {
      user: {},
      name: '',
      description: '',
      ingredients: [],
      procedures: []
    };
  }

  getUser(username) {
    this.props.fetchUserData(username);
  }

  render() {
    const {bio, avatar_url} = this.props.user;
    const data = {
      bio,
      avatar: avatar_url,
    };

    return (
      <div>
        <h1>Welcome to our workshop.</h1>
        <div>
          <Link to="/home">Go home!</Link>
        </div>
        <div>
          <button onClick={() => this.getUser('kingisaac95')}>Get user</button>
        </div>
        <Name
          data={data}
        />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    user: state.user.userData
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    fetchUserData
  }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(WorkShop);