React Lesson 15: Checking Homework progress from Lesson 14

React Lesson 15: Checking Homework progress from Lesson 14

React Lesson 15: Checking Homework progress from Lesson 14

Hey everyone, this is the 15th and the last lesson of this React course and I hope you had fun learning along with me. Today, we are going to cover homework from Lesson 14 and add comment API to load comments. We will go through 4 simple steps:

  1. Create action types
  2. Add action to fetch comments from API
  3. Update reducer to receives these comments
  4. Update View to render the comments

Let’s start ūü§©

Step 1: Create action types

As you may recall from Lesson 13, we need 3 types of action creators to handle 3 phases of request: start, fail, and success. Let’s create then:

Step 2: Add action creators to fetch comments from API

First, we will import the types we just created and define the action creators for the 3 phases of request. We have to dispatch one action creator when the request starts, one when the request fails, and finally one when the request is successful. Let’s add these:

We are using redux-thunk to handle async requests just like we did with articles API. Now, we just have to add the thunk functions which will handle the asynchronous API call and dispatch the 3 actions we just created accordingly.

That’s it for the action creators. Please note, the comments are coming from http://localhost:3001/api/comment?article=${articleId}. This API endpoint receives articleId and returns all the relevant comments for that particular article. We will call this API when the user presses the “SHOW COMMENTS” button. Let’s move on to the 3rd step and update our reducer.

Step 3: Update reducer to receives these comments

We have changed the way how we used to get comments. Now, we are not getting all the comments from fixtures.js thus it is no longer needed. That means defaultComments will be an empty array and we will fetch only those comments which are requested by the user. Let’s jump to code now:

The comments array can have all the comments of one article at a time. Hence, the INITIAL_STATE will be changed like this:

As we defined 3 action creators to handle the 3 phases of request. We will need 3 separate reducer cases to handle those action creators. Finally, let’s update the reducer to support the 3 action creators we wrote above:

Now, we just have to call the API with the requested articleId and get relevant comments.

Step 4: Update View to render the comments

Let’s understand what’s happening here. The user clicks on an Article title and sees the Article description along with the “Show Comment” button. Then “Show Comment” is clicked which will toggle the CommentList component to render. The CommentList.js component is responsible to list down all the comments.

We can use the componentDidMount method of the CommentList component to request the comments as soon as it is rendered and show the “loading…” text while the fetch is in progress.

We are going to dispatch the fetchCommentRequest action creator from this component and wire it with the “SHOW COMMENTS” button. Go to CommentList.js and import the action creator:

Now, call this action when the component mounts:

Update render method to show “Loading…” text when API is in progress:

Update mapStateToProps method to get the comments and isFetching from INITIAL_STATE:

And finally, connect mapStateToProps and the actions:

The CommentList will look something like this, make sure you have not forgotten anything:

We are showing a¬†loading… text while the request is in progress. It’s a good practice to let the user know that we are fetching something. Once the request is complete, the isFetching flag will be false and comments will be shown to the user. We can also show an error if the request gets failed. At last, go to src/components/Article/index.js and update CommentList.js usage to support the new implementation:

Here, we removed props comments in CommentList as it will be fetched directly when the component mounts for a given article.

Run the app and see if everything is working as expected.
You can update all the actions to support APIs as you already understand how async calls work with redux. The simple_api folder has all the APIs already created. You can use them to add comments, delete comments, add articles, delete articles, etc. The flow will be exactly similar to what we have just learned.

Thunk Middleware can dispatch as many actions as we want and it is very handy when it comes to handling async requests but it’s not the only way. Other popular methods include:

  • redux-saga is another popular library which uses generator functions
  • redux-observables dispatches observables which can then be observed for changes
  • redux-promise to dispatch promises instead of functions

You can choose whatever you want based on your preference. Just make sure to be consistent and follow one method throughout the app. It will help you manage the state when the app grows bigger and becomes complex.

This is the end of this lesson as well as this course. I hope you had fun while building this app and learning the react concepts. We can’t wait to see you on soshace.com. Goodbye until we meet again ūüôā.

You can find the complete code in this repo.

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

React Lesson 13. Part 1: Asynchronous actions

Our topic for today deals with asynchronous actions. We will start to take our articles from API. As you have already noticed, we have a simple API ...

No comments yet

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