Blog / JavaScript / React / React Lessons / React Lesson 12: Checking Homework Progress from Lesson 11

React Lesson 12: Checking Homework Progress from Lesson 11

By Mohammad Shad Mirza 8,705 June 23, 2020

Category:

JavaScript

React

React Lessons

React Lesson 12: Checking Homework Progress from Lesson 11

Hey everyone, In this lesson, we will go through our home task for the Lesson 11 and learn how it is effective to connect the store to any component. Our home task was to create a form that takes input and add a comment. Let’s start.

Step 1: Create a form that takes user input

Let’s go to the component directory and add a CommentForm.js file. This file will include a form with text input and a button to add a comment. We will pass the addComment function and articleId from parent component. We will see that in a minute.

import React, { Component } from "react";
import PropTypes from "prop-types";

class CommentForm extends Component {
  static propTypes = {
    addComment: PropTypes.func.isRequired,
    articleId: PropTypes.string.isRequired
  };

  state = {
    user: "",
    text: ""
  };

  handleSubmit = e => {
    const { addComment, articleId } = this.props;
    e.preventDefault();
    addComment(this.state, articleId);
    this.setState({
      user: "",
      text: ""
    });
  };

  render() {
    const { text, user } = this.state;
    return (
      <form onSubmit={this.handleSubmit}>
        <label>Comment:</label>
        <input
          value={text}
          onChange={e => this.setState({ text: e.target.value })}
        />
        <label>By:</label>
        <input
          value={user}
          onChange={e => this.setState({ user: e.target.value })}
        />
        <button type="submit">Add comment</button>
      </form>
    );
  }
}

export default CommentForm;

import React, { Component } from "react";

import PropTypes from "prop-types";

class CommentForm extends Component {

static propTypes = {

addComment: PropTypes.func.isRequired,

articleId: PropTypes.string.isRequired

};

state = {

user: "",

text: ""

};

handleSubmit = e => {

const { addComment, articleId } = this.props;

e.preventDefault();

addComment(this.state, articleId);

this.setState({

user: "",

text: ""

});

};

render() {

const { text, user } = this.state;

return (

<label>Comment:</label>

<input

value={text}

onChange={e => this.setState({ text: e.target.value })}

<input

value={user}

onChange={e => this.setState({ user: e.target.value })}

<button type="submit">Add comment</button>

</form>

);

}

export default CommentForm;

How does the form work?

Let’s go into further details of how the form is working. You can see that we are storing user and text info in the store. Whenever the user types something in input, we take change via onChangehandler and update the state using setState. This state is being passed as the value of input which we can use later.

<input
    value={text}
    onChange={e => this.setState({ text: e.target.value })}
/>

<input

value={text}

onChange={e => this.setState({ text: e.target.value })}

When the user hits the submit button, we call handleSubmit function which takes the values from the state and dispatches an action to addComment. It then resets the state back to its default state.

this.setState({
    user: "",
    text: ""
});

this.setState({

user: "",

text: ""

});

Step 2: Include form in CommentList component

The next step is to add this form in the CommentList component where the user will type and add comments. But first, we will restructure our project. CommentList will be connected to the store now because it will contain the form. Let’s move it to /containers directory and correct the import paths. After that, let’s import the CommentForm we just created and use it. I have added comments to you about what we are updating.

import React, { Component } from "react";
import Comment from "./../components/Comment"; //update import
import CommentForm from "./../components/CommentForm"; //import CommentForm
import toggleOpen from "../decorators/toggleOpen";
import { addComment } from "../actions"; // action creator that we will create next
import { connect } from "react-redux";

@toggleOpen
class CommentList extends Component {

  render() {
    // get article from props passed via parent component
    const { commentObj, isOpen, toggleOpen, article, addComment } = this.props;
    
    if (!commentObj || !commentObj.length) return <h3>no comment yet</h3>;

    const commentItems = commentObj.map(comment => (
      <li key={comment.id}>
        <Comment comment={comment} />
      </li>
    ));

    // update body and add CommentForm
    const body = isOpen ? (
      <div>
        <ul>{commentItems}</ul>
        <CommentForm articleId={article.id} addComment={addComment} />
      </div>
    ) : null;

    const linkText = isOpen ? "close comment" : "show comments";
    return (
      <div>
        <button onClick={toggleOpen} ref="toggler">
          {linkText}
        </button>
        {body}
      </div>
    );
  }
}

const mapStateToProps = (state, props) => {
  console.log({ props, state });
  return {
    commentObj: props.comments.map(id => state.comments.comments.get(id))
  };
};

export default connect(
  mapStateToProps,
  { addComment }
)(CommentList);

import React, { Component } from "react";

import Comment from "./../components/Comment"; //update import

import CommentForm from "./../components/CommentForm"; //import CommentForm

import toggleOpen from "../decorators/toggleOpen";

import { addComment } from "../actions"; // action creator that we will create next

import { connect } from "react-redux";

@toggleOpen

class CommentList extends Component {

render() {

// get article from props passed via parent component

const { commentObj, isOpen, toggleOpen, article, addComment } = this.props;

if (!commentObj || !commentObj.length) return <h3>no comment yet</h3>;

const commentItems = commentObj.map(comment => (

</li>

));

// update body and add CommentForm

const body = isOpen ? (

<div>

<ul>{commentItems}</ul>

</div>

) : null;

const linkText = isOpen ? "close comment" : "show comments";

return (

<div>

{linkText}

</button>

{body}

</div>

);

}

const mapStateToProps = (state, props) => {

console.log({ props, state });

return {

commentObj: props.comments.map(id => state.comments.comments.get(id))

};

export default connect(

mapStateToProps,

{ addComment }

)(CommentList);

Step 3: Create addComment action

Let’s quickly add a type for action creator and add an action that takes user and comment id then updates the store. Go to /types.js and add the following line:

export const ADD_COMMENT = "add_comment";

1	export const ADD_COMMENT = "add_comment";

Now go to /actions directory and add a new file comments.js

import { ADD_COMMENT } from "../types";

export const addComment = (comment, articleId) => {
  return {
    type: ADD_COMMENT,
    payload: { ...comment, articleId },
    withRandomId: true
  };
}

import { ADD_COMMENT } from "../types";

export const addComment = (comment, articleId) => {

return {

type: ADD_COMMENT,

payload: { ...comment, articleId },

withRandomId: true

};

}

export this action from root file actions/index.js

//other exports
export * from "./comments";

1 2	//other exports export * from "./comments";

We are passing withRandomId: true to generate a random id whenever this action is called. We can easily do this by adding a middle where that performs this task for us.

Adding middleware to generate a random id for comments

Go to /middlewares directory and add a file randomID.js

export default store => next => action => {
  const { withRandomId, ...rest } = action;
  if (!withRandomId) return next(action); // if withRandom is false, continue as usual

  next({
    ...rest,
    randomId: Date.now() + Math.random() // generate and append random id with the rest of the payload if withRandom is true
  });
};

export default store => next => action => {

const { withRandomId, ...rest } = action;

if (!withRandomId) return next(action); // if withRandom is false, continue as usual

next({

...rest,

randomId: Date.now() + Math.random() // generate and append random id with the rest of the payload if withRandom is true

});

};

Now, add this in store

//...imports
import randomId from "../middlewares/randomID"; //import randomID middleware

const enhancer = compose(
  applyMiddleware(dumbMiddleware, logger, randomId), // apply middleware
  window.devToolsExtension ? window.devToolsExtension() : f => f
);

const store = createStore(reducer, {}, enhancer);

export default store;

//...imports

import randomId from "../middlewares/randomID"; //import randomID middleware

const enhancer = compose(

applyMiddleware(dumbMiddleware, logger, randomId), // apply middleware

window.devToolsExtension ? window.devToolsExtension() : f => f

);

const store = createStore(reducer, {}, enhancer);

export default store;

We are good to go now 👍🏼

Step 4: Update reducer to add comments

Go to reducers/article.js and add a switch case for addComment action.

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case ADD_COMMENT:
      return {
        ...state, comments: state.comments.set(
          action.randomId,
          new Comment({
            id: action.randomId,
            user: action.payload.user,
            text: action.payload.text,
          })
        )}
    default:
      return state;
  }
};

export default (state = INITIAL_STATE, action) => {

switch (action.type) {

case ADD_COMMENT:

return {

...state, comments: state.comments.set(

action.randomId,

new Comment({

id: action.randomId,

user: action.payload.user,

text: action.payload.text,

})

)}

default:

return state;

}

};

And the last thing. Take a look at reducer/articles.js, in particular at Record :

const Article = Record({
    "id": "",
    "date": "",
    "title": "",
    "text": "",
    "comments": []
});

const Article = Record({

"id": "",

"date": "",

"title": "",

"text": "",

"comments": []

});

It is an immutable structure. And while you won’t do anything with the primitives, it is quite possible to do with comments. For example, by using push for comments you mutate them with this method since it is a simple array. With this action, you lose everything that immutable structures bring to you. When you change something inside, Immutable.js thinks nothing has really changed. So we have to take care of that.

Let’s also update the article.js reducer to return updated comments list.

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case ADD_COMMENT:
      return {
        ...state, articles: state.articles.updateIn(
          [action.payload.articleId, "comments"],
          comments => comments.concat(action.randomId)
        )};
    case DELETE_ARTICLE:
      return { ...state, articles: state.articles.delete(action.payload) };

    default:
      return state;
  }
};

export default (state = INITIAL_STATE, action) => {

switch (action.type) {

case ADD_COMMENT:

return {

...state, articles: state.articles.updateIn(

[action.payload.articleId, "comments"],

comments => comments.concat(action.randomId)

)};

case DELETE_ARTICLE:

return { ...state, articles: state.articles.delete(action.payload) };

default:

return state;

}

};

Now we have to do is pass the article to the CommentList component. Go to components/Article/index.js and pass the article:

//...
<section>
    {text} <CommentList article={article} comments={comments} />
</section>
//...

//...

{text} <CommentList article={article} comments={comments} />

</section>

//...

We are done with your home task. One thing can do in add a helper in component/Article.js comment that filters data and connect it with the store.

const mapStateToProps = state => {
  return {
    articles: filterArticles(state.article.articles, state.filters)
  };
};

export default connect(
  mapStateToProps,
  {}
)(Articles);

const mapStateToProps = state => {

return {

articles: filterArticles(state.article.articles, state.filters)

};

export default connect(

mapStateToProps,

{}

)(Articles);

Here, filterArticle is a helper function that filters our data and makes our component “smart” in choosing when to re-render. Let’s quickly write that helper:

function filterArticles(articles, { from, to, selectedArticles }) {
  return articles
    .valueSeq()
    .filter(article =>
      selectedArticles.length ? selectedArticles.includes(article.id) : true
    )
    .filter(
      article =>
        (!from || Date.parse(article.date) > from) &&
        (!to || Date.parse(article.date) < to)
    );
}

function filterArticles(articles, { from, to, selectedArticles }) {

return articles

.valueSeq()

.filter(article =>

selectedArticles.length ? selectedArticles.includes(article.id) : true

)

.filter(

article =>

(!from || Date.parse(article.date) > from) &&

(!to || Date.parse(article.date) < to)

);

}

Redux will check whether the list of filtered articles corresponds to the previous one and will conclude that nothing needs to be updated. That’s why we add connect whenever we need to refer to the data we lack at the moment. We need to choose: to take the data at a higher level or add connect at a lower level.

That’s it for today’s lesson. I hope you understand how to work forms and use connect function better. Carefully learn and analyze everything we’ve done in frames of your home task and we will move on. Good luck, see you later!

You can visit the codesandbox below to see Lesson 12 in action.

The lesson code is available in our repository.

About the author

Mohammad Shad Mirza

Registered 11-12-2019 | Last seen 8 months ago 72

4 Comments | 31 Publications

Top developers

Vitor L. PHP/Laravel developer
PHP LaravelAWS Show lessAll skills
Bryan C. Full-stack JavaScript developer
Angular CSSJS Node.js Show lessAll skills
Juan F. Senior JavaScript developer
JS ReactNode.js HTML CSS Show lessAll skills
Miodrag M. Senior React developer
JS ReactCSS Show lessAll skills

Mohammad Shad Mirza

29.07.2020

React Lesson 15: Checking Homework progress from Lesson 14

Today, we are going to cover homework from Lesson 14 and add comment API to load comments. ...

JavaScript React React Lessons

Mohammad Shad Mirza

23.07.2020

React Lesson 14: Redux Thunk Deep Dive

In this lesson, we will understand the internals of Redux Thunk and the use cases where we should use ...

JavaScript React React Lessons

Mohammad Shad Mirza

6.07.2020

React Lesson 13 Part 2: Asynchronous actions

In the previous article, we used Redux Thunk and learned how to structure actions for asynchronous calls. Now we will update reducer to handle them ...

JavaScript React React Lessons

3 comments

Alisha May June 29, 2020 at 10:46 pm

Hi) I really like this lesson, it is interesting and clearly written. I also often write academic papers and I know how hard it is to write simply but clearly.

Mohammad Shad Mirza December 14, 2020 at 11:17 am

Thanks Alisha

Mohammad Shad Mirza December 14, 2020 at 11:17 am

Thank you

React Lesson 12: Checking Homework Progress from Lesson 11

Step 1: Create a form that takes user input

How does the form work?

Step 2: Include form in CommentList component

Adding middleware to generate a random id for comments

Step 4: Update reducer to add comments

About the author

Vacancies

Top developers

Related articles

React Lesson 15: Checking Homework progress from Lesson 14

React Lesson 14: Redux Thunk Deep Dive

React Lesson 13 Part 2: Asynchronous actions

3 comments

Categories

Password recovery

React Lesson 12: Checking Homework Progress from Lesson 11

Step 1: Create a form that takes user input

How does the form work?

Step 2: Include form in CommentList component

Adding middleware to generate a random id for comments

Step 4: Update reducer to add comments

About the author

Vacancies

Stay Informed

Stay Informed

Stay Informed

Top developers

Related articles

React Lesson 15: Checking Homework progress from Lesson 14

React Lesson 14: Redux Thunk Deep Dive

React Lesson 13 Part 2: Asynchronous actions

3 comments

Categories

Sign in

Sign in \ Sign Up

Password recovery