How to Divide React Components into Presentational and Container Components

general
1

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

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=""
/>

        <p className="text-center">{post.name}

      </div>
      <div className="col-md-10">
        <p className="lead">{post.text}

        {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)
})}
/>
{post.likes.length}

<button
onClick={this.onUnlikeClick.bind(this,
post._id)}
type=“button”
className=“btn btn-light mr-1”
>


<Link to={/post/${post._id}}
className=“btn btn-info mr-1”>
Comments

{post.user === auth.user.id ? (
<button
onClick={this.onDeleteClick.bind(this,
post._id)}
type=“button”
className=“btn btn-danger mr-1”
>


) : null}

) : null}



); } }

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. If you could help me explain and provide some example code that would be amazing.

Thanks in advance!

2

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

export default PostItemContainer;
192.168.0.1