React Lessons. Lesson 13 Part 2.


So, let us call these elements inside containers/Articles.js by adding the record and calling action creater:

And down below, in connect, we will wrap it:

And call it further in  componentDidMount().

Also, in reducer/articles.js we will remove defaultArticles, which we’ve created with you:

Do not forget to connect the object OrderedMap in import:

Now we need to connect our middleware inside our store in store/index.js.


And add it to the same row with other middlewares: for example, following randomID:

Now, if we restart the app , we will see LOAD_ALL_ARTICLES_SUCCESS in console.

Let us add setTimeout to simulate some remote API, we’ll add it to middlewares/api.js:

Now, if you enter console and restart our app, you will have  START actions and SUCCESS in a second.

So, right now we need to teach our reducers how to deal with the new logics. Move to  reducer/articles.js.  Here we do not only need to have articles as a set of articles, since our app is developing, getting more sophisticated, and we feel a need to have some info on downloading status of the articles.

Connect Map, as well as the immutable array  List from immutable.js:

Describe the initial state of our reducer  by adding the following record:

Having the articles added here, we receive a structure that can be reused from one reducer to another, which means entities will contain articles and comments . Our code below will also be changed:

Pay your attention to the commenting-out string. This record describes how you can load your articles in a different way using the methods update and  merge from immutable.js. In this case, we update the list of our articles. When we receive LOAD_ALL_ARTICLES + SUCCESS, we take old entities  (whether we’ve had them) and do merge with the new ones. By default, the process of adding articles will be executed by us using set  i.e. just by simply updating the list. We’ve added  .set('loading', ...) in order to have a chance for adding loader when uploading our articles.

Let’s move on. Now we need to re-write the logics of how we receive the data in function   filterArticles  in containers/Articles.js, as well as add loader to our UI:

We’ve added an indicator to export default and a simple loader to render. (Once we’re finished, we’ll see a respectful status “Loading” until an article gets uploaded).
In immutable.js you need to write your address explicitly in order to get  articles.get('entities') data. When we used the immutable object Record, we could avoid this kind of calling, since everything was going on behind the curtain, and “getters” and “setters” were created inside, as in case of const Article  in  reducer/articles.js.
Let us continue our upgrading and change  reducer/articles.js  in the following way:

We are not going to deal with the errors right now. The record on import

normalizedArticles won’t be needed here anymore. Let us change our constant defaultArticles :

And, of course, return in the end of the file:

Everything’s done now – go ahead and check it! Our lesson’s code can be found here. See you soon! We’ve got bunch of interesting things ahead!


We are looking forward to meeting you on our website

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 Lessons. Lesson 14.

Hey all! So, we continue working on our app. We already know how to make simple calls to the server and for 80% of possible cases this knowledge will ...

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

React Lesson 12: Checking Homework Progress from Lesson 11

Hey everyone, In this lesson, we will go through our home task and learn how it is effective to connect the store to any component. Our home task was ...

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