content: import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { Link } from 'react-router-dom';
  import { fetchPost, deletePost } from '../actions';
  
  class PostsShow extends Component {
      componentDidMount() {
          const { id } = this.props.match.params; // This is provided by react router
          this.props.fetchPost(id);
      }
  
      onDeleteClick() {
          const { id } = this.props.match.params;
          this.props.deletePost(id, () => {
              this.props.history.push('/');
          });
      }
  
      render() {
          const { post } = this.props;
  
          if (!post) {
          return (<div>Loading...</div>);
          }
  
          return(
              <div>
                  <Link to="/">Back To Index</Link>
                  <button
                      className="btn btn-danger pull-xs-right"
                      onClick={this.onDeleteClick.bind(this)}
                  >Delete post</button>
                  <h3>{post.title}</h3>
                  <h6>Categories: {post.categories}</h6>
                  <p>{post.content}</p>
              </div>
          );
      }
  }
  
  // first argument should be the application state
  // Second argument by convention is called ownProps.
  // ownProps is the props object that is going to the PostsShow Component so apart from the scoping, it's essentially this.props === ownProps
  function mapStateToProps({ posts }, ownProps) {
      return { post: posts[ownProps.match.params.id] };
  }
  
  export default connect(mapStateToProps, { fetchPost, deletePost })(PostsShow);