UserRepos.js - Container component example

UserRepos.js

// File- src/home/containers/UserRepos.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'
// Import dumb component 
import Repo from '../components/Repo';
// Actions
import { doUserRepos } from '../actions/doUserRepos';
// Container component
class UserRepos extends Component {
  componentDidMount() {
    let username = "mohandere";
    this.props.doUserRepos(username);
  }
  render() {
    let { repos } = this.props;
    if (this.props.loading) {
      return <div className="userReposLoader">Loading...</div>;
    }
    return (
      <div>
      <h3>Github Projects</h3>
      <ul className="repos">
      {repos.map((repo, i) => <Repo key={i} {...repo} />)}
      </ul>
      </div>
    );
  }
}

UserRepos.propTypes = {
  repos: PropTypes.array
};

const mapStateToProps = state => {
  return {
    repos: state.home.userRepos.repos,
    loading: state.home.userRepos.isLoading
  };
};

const mapDispatchToProps = dispatch => {
  return bindActionCreators({
      doUserRepos
    },
    dispatch
  );
};

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