SIGN IN

React Lessons. Lesson 13 Part 2.

Stay Informed

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

Stay Informed

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

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

Doimport:

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!

react-boilerplate

We are looking forward to meeting you on our website soshace.com

About the author

Stay Informed

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

Stay Informed

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

Related articles

The Path of the Self-Taught Programmer: Avoiding Common Problems

In this article, we’ll explore how a self-taught programmer comes to be: which education opportunities they can utilize, which problems they may>>>

Programming

Introduction to GitHub Desktop: A GUI Enhancement to a CLI Approach

In this article, we'll explore various use cases of GitHub Desktop -- GUI software designed to ehance your git workflow. Does it hold up against CLI>>>

Programming
29.10.2019

Python Array Explained and Visualized

In this tutorial, we’ll delve into how Python arrays work, what their limitations are, and how you can use them to maximize their>>>

Programming

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