How to Divide React Components into Presentational and Container Components

Question

Still new to react and redux and have been working on a MERN user registration application which I got working now.

In the redux documentation I found the creators recommend splitting their code up into two types of components when integrating redux with react: Presentational (concerns with how things look) and Container (concerns with how things work). See https://redux.js.org/basics/usagewithreact.

I think this would allow for better management and scalability of the application.

For people unfamiliar, here is a good explanation of the advantages: https://www.youtube.com/watch?v=NazjKgJp7sQ

I only struggle in grasping the concept and rewriting the code in such a way.

Here is an example of a post component I written using to display user created comments. It is receiving the data from the post in a higher-level component passed down as props. In the return I have all my markup with bootstrap styling applied. I am subscribing to redux actions I imported and using by creating event handlers.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import classnames from 'classnames';
import { Link } from 'react-router-dom';
import { deletePost, addLike, removeLike } from '../../actions/postActions';

class PostItem extends Component {
  onDeleteClick(id) {
    this.props.deletePost(id);
  }

  onLikeClick(id) {
    this.props.addLike(id);
  }

  onUnlikeClick(id) {
    this.props.removeLike(id);
  }

  findUserLike(likes) {
    const { auth } = this.props;
    if (likes.filter(like => like.user === auth.user.id).length > 0) {
      return true;
    } else {
      return false;
    }
  }

  render() {
    const { post, auth, showActions } = this.props;

    return (
      <div className="card card-body mb-3">
        <div className="row">
          <div className="col-md-2">
            <a href="profile.html">
              <img
                className="rounded-circle d-none d-md-block"
                src={post.avatar}
                alt=""
              />
            </a>
            <br />
            <p className="text-center">{post.name}</p>
          </div>
          <div className="col-md-10">
            <p className="lead">{post.text}</p>
            {showActions ? (
              <span>
                <button
                  onClick={this.onLikeClick.bind(this, post._id)}
                  type="button"
                  className="btn btn-light mr-1"
                >
                  <i
                    className={classnames('fas fa-thumbs-up', {
                      'text-info': this.findUserLike(post.likes)
                    })}
                  />
                  <span className="badge badge-light">{post.likes.length}</span>
                </button>
                <button
                  onClick={this.onUnlikeClick.bind(this, post._id)}
                  type="button"
                  className="btn btn-light mr-1"
                >
                  <i className="text-secondary fas fa-thumbs-down" />
                </button>
                <Link to={`/post/${post._id}`} className="btn btn-info mr-1">
                  Comments
                </Link>
                {post.user === auth.user.id ? (
                  <button
                    onClick={this.onDeleteClick.bind(this, post._id)}
                    type="button"
                    className="btn btn-danger mr-1"
                  >
                    <i className="fas fa-times" />
                  </button>
                ) : null}
              </span>
            ) : null}
          </div>
        </div>
      </div>
    );
  }
}

PostItem.defaultProps = {
  showActions: true,
};

PostItem.propTypes = {
  deletePost: PropTypes.func.isRequired,
  addLike: PropTypes.func.isRequired,
  removeLike: PropTypes.func.isRequired,
  post: PropTypes.object.isRequired,
  auth: PropTypes.object.isRequired,
};

const mapStateToProps = state => ({
  auth: state.auth,
});

export default connect(mapStateToProps, { deletePost, addLike, removeLike })(PostItem);

As you can see is the code not as neat and compact as I would like. My goal is to make the presentational component unaware of redux, and do all styling and bootstrap stuff here, while the container component have the redux and connect functionalities. Does anyone know how I should approach this?

I saw people using connect to link these types components together:

const PostItemContainer = connect(
    mapStateToProps, 
    { deletePost, addLike, removeLike }
)(PostItem);

export default PostItemContainer;

But I have no idea how to achieve this in practice. If you could help me explain and provide some example code that would be amazing.

Thanks in advance!

Answer 1

This is a very similar suggestion to @jsDevia's answer but I don't create a separate component here since you said your Post component is already connected to Redux. So, you can grab all action creators and state there and pass those to your PostItem component.

The second difference is I use a functional component instead of class component since you don't need any state or lifecycle method here.

The third difference is a small one. I removed all binding from your onClick handlers. For the this scope issue, I'm using arrow functions for the handlers. Again, we don't need any argument, like post._id to pass those function because we already have post as a prop here. This is the beauty of separating our components.

Using bind or an arrow function in callback handlers cause some performance issues for larger apps which have so many components like Post. Since those functions recreated every time this component renders. But, using the function reference prevents this.

const PostItem = ({
  post,
  deletePost,
  addLike,
  removeLike,
  auth,
  showActions,
}) => {

  const onDeleteClick = () => deletePost(post._id);
  const onLikeClick = () => addLike(post._id);
  const onUnlikeClick = () => removeLike(post._id);
  const findUserLike = likes => {
    if (likes.filter(like => like.user === auth.user.id).length > 0) {
      return true;
    } else {
      return false;
    }
  };

  return (
    <div className="card card-body mb-3">
      <div className="row">
        <div className="col-md-2">
          <a href="profile.html">
            <img
              className="rounded-circle d-none d-md-block"
              src={post.avatar}
              alt=""
            />
          </a>
          <br />
          <p className="text-center">{post.name}</p>
        </div>
        <div className="col-md-10">
          <p className="lead">{post.text}</p>
          {showActions ? (
            <span>
              <button
                onClick={onLikeClick}
                type="button"
                className="btn btn-light mr-1"
              >
                <i
                  className={classnames("fas fa-thumbs-up", {
                    "text-info": findUserLike(post.likes),
                  })}
                />
                <span className="badge badge-light">{post.likes.length}</span>
              </button>
              <button
                onClick={onUnlikeClick}
                type="button"
                className="btn btn-light mr-1"
              >
                <i className="text-secondary fas fa-thumbs-down" />
              </button>
              <Link to={`/post/${post._id}`} className="btn btn-info mr-1">
                Comments
              </Link>
              {post.user === auth.user.id ? (
                <button
                  onClick={onDeleteClick}
                  type="button"
                  className="btn btn-danger mr-1"
                >
                  <i className="fas fa-times" />
                </button>
              ) : null}
            </span>
          ) : null}
        </div>
      </div>
    </div>
  );
};

By the way, do not struggle with the example that is given on Redux's documentation. I think it is a little bit complex for newcomers.

Answer 2

I would always put my html like ( presentation ) code in another file, which in react they call stateless component,

The key component is PostItemComponent which does not know anything about redux.

see the code below :

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import classnames from 'classnames';
import { Link } from 'react-router-dom';
import { deletePost, addLike, removeLike } from '../../actions/postActions';

const PostItemComponent = ({
    post,
    showActions,
    auth,
    onLikeClick,
    findUserLike,
    onUnlikeClick,
    onDeleteClick
}) => {
    return (
        <div className="card card-body mb-3">
            <div className="row">
                <div className="col-md-2">
                    <a href="profile.html">
                        <img
                            className="rounded-circle d-none d-md-block"
                            src={post.avatar}
                            alt=""
                        />
                    </a>
                    <br />
                    <p className="text-center">{post.name}</p>
                </div>
                <div className="col-md-10">
                    <p className="lead">{post.text}</p>
                    {showActions ? (
                        <span>
                            <button
                                onClick={(event) => onLikeClick(event, post._id)}
                                type="button"
                                className="btn btn-light mr-1">
                                <i
                                    className={classnames('fas fa-thumbs-up', {
                                        'text-info': findUserLike(post.likes)
                                    })}
                                />
                                <span className="badge badge-light">{post.likes.length}</span>
                            </button>
                            <button
                                onClick={(event) => onUnlikeClick(event, post._id)}
                                type="button"
                                className="btn btn-light mr-1"
                            >
                                <i className="text-secondary fas fa-thumbs-down" />
                            </button>
                            <Link to={`/post/${post._id}`} className="btn btn-info mr-1">
                                Comments
                            </Link>
                            {post.user === auth.user.id ? (
                                <button
                                    onClick={(event) => onDeleteClick(event, post._id)}
                                    type="button"
                                    className="btn btn-danger mr-1"
                                >
                                    <i className="fas fa-times" />
                                </button>
                            ) : null}
                        </span>
                    ) : null}
                </div>
            </div>
        </div>
    );
};

class PostItem extends Component {
    constructor(props) {
        super(props);
        this.onDeleteClick = this.onDeleteClick.bind(this);
        this.onLikeClick = this.onLikeClick.bind(this);
        this.onUnlikeClick = this.onUnlikeClick.bind(this);
        this.findUserLike = this.findUserLike.bind(this);
    }
    onDeleteClick(event, id) {
        event.preventDefault();
        this.props.deletePost(id);
    }

    onLikeClick(event, id) {
        event.preventDefault();
        this.props.addLike(id);
    }

    onUnlikeClick(event, id) {
        event.preventDefault();
        this.props.removeLike(id);
    }

    findUserLike(likes) {
        const { auth } = this.props;
        if (likes.filter(like => like.user === auth.user.id).length > 0) {
            return true;
        } else {
            return false;
        }
    }

    render() {
        const { post, auth, showActions } = this.props;
        return (
            <PostItemComponent
                post={post}
                auth={auth}
                showActions={showActions}
                onDeleteClick={this.onDeleteClick}
                onLikeClick={this.onLikeClick}
                onUnlikeClick={this.onUnlikeClick}
            />
        );
    }
}

PostItem.defaultProps = {
    showActions: true,
};

PostItem.propTypes = {
    deletePost: PropTypes.func.isRequired,
    addLike: PropTypes.func.isRequired,
    removeLike: PropTypes.func.isRequired,
    post: PropTypes.object.isRequired,
    auth: PropTypes.object.isRequired,
};

const mapStateToProps = state => ({
    auth: state.auth,
});

export default connect(mapStateToProps, { deletePost, addLike, removeLike })(PostItem);