text: import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { fetchPosts } from '../actions/index';
  import { Link } from 'react-router';
  // import { bindActionCreators } from 'redux';
  
  class PostsIndex extends Component {
    componentWillMount() { // lifecycle method react will call this when our component is about to be rendered to the DOM the 1st time
      this.props.fetchPosts();
    }
  
  
    renderPosts() {
      return this.props.posts.map((post) => {
        return (
          <li className='list-group-item' key={post.id}>
            <Link to={'posts/' + post.id}>
            <span className='pull-xs-right'>{post.categories}</span>
            <strong>{post.title}</strong>
            </Link>
          </li>
        )
      })
    }
  
    render() {
      return (
        <div>
          <div className='text-xs-right'>
            <Link to='/posts/new' className='btn btn-primary'>
              Add a post
            </Link>
          </div>
          <h3>Posts</h3>
          <ul className='list-group'>
            {this.renderPosts()}
          </ul>
        </div>
      );
    }
  }
  
  function mapStateToProps(state) {
    return { posts: state.posts.all };
  }
  
  // function mapDispatchToProps(dispatch) {
  //   return bindActionCreators({ fetchPosts }, dispatch);
  // }
  
  // export default connect(null, mapDispatchToProps)(PostsIndex);
  
  // shortcut for above commented out code
  export default connect(mapStateToProps, { fetchPosts })(PostsIndex);