React Lesson 12: Checking Homework Progress from Lesson 11

React Lesson 12: Checking Homework Progress from Lesson 11

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.

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.

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.

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.

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:

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

export this action from root file actions/index.js

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

Now, add this in 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.

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

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.

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

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.

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:

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.
Edit React_lesson_lesson12
The lesson code is available in our repository.

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

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. ...

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 ...

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 ...

1 comment

Alisha May June 29, 2020 at 10:46 pm
0

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.

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy