React Lesson 9: Homework Lesson 8

 

React Lessons. Lesson 9. Homework Lesson 8

React Lessons. Lesson 9. Homework Lesson 8

Hey everyone! Today, we will start our lesson with your home task and do it together. Our main goal here is to learn how to keep data: either in store or in the local state of the components. So, let us discuss it now.

Theoretically, the store should contain all information needed to describe your app, which means 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, while working with forms, every change in clicks gets registered in the state, which is not something we would want. Working with standard apps, you should keep in store only the data that will be enough for the full restoration of your app. It gives an understanding of 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 the state.

The things you won’t regret to lose should be stored in the local state. For example, the number of articles is important, which means if some articles are deleted, you need to know this. And you need to knows this even when the page reloads– so, it should be kept in the store.

Now, we’ve come to an issue of filters and their creation. Let us make a reducer that will store filter values. Right now, all our information is stored in the ArticleList component, and we will separate it into an independent component/container.

Separation of concerns

We want our filter feature separate in a container. We want functionality associated with Select and DayPicker currently present in ArticleList in a separate container.

Let’s get back to our agenda for this lesson and think about the state. Filter info like “from” and “to” constraints are needed to filter out articles that are present in the Redux store. This means that we will have to access the Redux store to filter articles. We would want to know which articles we filtered even when the app reloads. So based on these facts, storing filter information in Redux is better in our case. Let’s code:

Step 1: Create filters.js reducer

Let’s add an action type inside types.js


Now, create a file filters.js inside reducers directory


Finally, import this reducer inside /reducers/index.js

Step 2: Create filters.js action

We have to pass id when we dispatch an action to the reducer. Let’s write an action for that:

Step 3: Create a View and connect with the store

Let us create Filters.js in the Containers folder. We will add everything we need for filters right here:


Here, we are using articles and filters from reducer with the help of mapStateToProps argument of connect function.

We have extracted filter info associated with Select and DayPicker in a separate file Filter.js. Let’s import this Filter inside ArticleList:


Our ArticleList component looks much more organized and readable now. Yay 🎉

So, in this way, we can store the article’s data and filter information separately. Whenever we need it, we take information from both sources – filters and articles – and filter it. As we have filter separated, it works even when we get new articles in the app, the old filter will continue to work until we intentionally change it.

You can visit this codesandbox below to see today’s lesson in action.


Edit React_lesson_lesson9

Your home task code can be found here.

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 Lessons. Lesson 13 Part 2.

"Dear readers! Do not forget about the first part of this article, beginners should start from Lesson 1." So, let us call these elements inside ...

React Lessons. Lesson 13. Part 1.

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