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 Lesson 15: Checking Homework progress from Lesson 14

Today, we are going to cover homework from Lesson 14 and add comment API to load comments. ...

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

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