React Lessons. Lesson 9.

Hey all! Today we will start our lesson with your home task and do it together. Our main goal of these lessons is to help our readers learn how to think keeping data categories in mind. This is a basis of functional programming, when you describe any system – for example, UI – with a set of data. We’ve been doing everything in a pretty simple way in our lessons so far. We’ve published our articles containing all essential things: a counter containing a number and so on. We haven’t done anything complex yet, we haven’t integrated all these elements and haven’t thought what data should be kept in store or state of the components. So, let us discuss it now. First, what data and where should be stored?

Theoretically, store should contain all information needed to describe your app meaning that your state components are empty, but in practice it is different and there is no sense to move some elements from state to store. For example, there may be projects, where working with forms every click changes get registered in state, which is too much, as we believe. Working with standard apps you should keep in store the data that will be enough for full restoring of your app. It gives an understanding what can be sacrificed when writing an app. For instance, if a user reloads a page and a calendar gets closed, which is not that important, it can be added to state. The things you won’t regret to lose should be stored here. For example, the number of articles is essential for you, which means if some articles get deleted, you definitely need to know about this. You would like to knows this information – so, it should be kept in store. So, we’ve come to an issue of filters and their creation. Let us make reducer that will store filter values. Right now all our information is stored in the ArticleList component, and we will separate them into an independent component/container.

Let us create Filters.js in the Containers folder. And we will add everything we need for filters right here. So, ArticleList will contain:

Where we will add import Filters and show them in return.
Any other information got transmitted to Filters.

Add  { conncect } to import and export default

So, let us check. Everything should work, though we haven’t done anything special yet. The most important thing right now is that we do not need state anymore. We need to make such elements as selectedArticles, from to be stored in reducer . Let us create a filters.js file in a reducer folder :

In reducer/index.js add the following:

And learn how to make them changing by entering constants.js and adding:

Do not forget to create action creater – filters.js:

Now let us get our reducer done with the following:

Add the following record below in return preventing any state change. Let me remind you that in React we do not change a previous state, but always return a new one. If Redux sees that nothing has changed, it won’t initiate any callbacks subscribed to your changes. In containers/filters.js import our AC:

Also, let us add it to connect and take not only articles, but filters, too, from state:

Now everything that was previously read from state needs to be read from filters:

Now all data get transmitted through Redux store and are stored there.
So, let us talk about filters. Now filters are available in Articles.js. Today store contains both articles and filters. We want to see filtered articles as a result. The best place for this is connect. The filtration function itself can be moved to utils, for example, or you can write right there in Articles – it depends on you. Let us write it here for this time, but we would recommend you to make a separate file for such things:

From the very beginning we will store an empty massive in reducer/filters.js:

So, it is a way of storing the articles data and filter information separately. Whenever we need it, we take information from both sources – filters and articles – and filter it. Thanks to connect, we get our data, ready-to-use and filtered, in Articles. Data get added to store only through reducers. Store contains some state, when dispatch of some action happens using storeDispatch, with the help of action creator wrapped using connect in our example. Whenever we do dispatch of some action, it goes to reducers, which take and old store state and action to be under dispatch (for example, a filter change); we take old filters we used to have and action, get change out of there and do merge of old and new filters. Remember, you should do these steps using a new object to prevent any change of the old ones. Once reducer is done with its work, store gets a new state, stores it and requests all callbacks subscribed using store.subscribe and updates the respective components.

Your home task code can be found here.


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


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


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


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