Romantic about State Management (P1)

1. Introduction

Surely for each of you front-end engineer, the phrase state management is nothing strange anymore. Simply put, it will be the method you use to manage state in your front-end application. In today’s article I will share with you about what I have experienced as well as the lessons I learned after a while working with ReactJS and VueJS . Let us begin with.

2. What is State?

State or translated into Vietnamese is the state, according to us, it is the state of the application in a given moment. In some cases this state can be present for what the user sees on the screen or sometimes hidden from the user. Suppose right on Viblo when you click on your avatar in the upper right corner of the screen, you will see a dropdown form displayed. And vice versa when it is showing and you click again it will be lost:

Hiding or showing that dropdown is due to a change in the state of your application. Or if you have been writing articles on Viblo, Viblo will always automatically save our posts without having to constantly click the Save button. However, we do not see this clearly visible if you write in Fullscreen or Side by side . The deep fact that there must also be a state that is most simply changed is that the content related to the last time the article is automatically saved.

Inside our code, these states will be represented as values ​​of data types such as Number, Boolean, Object, Array, …. With the first example shown above, hiding and showing the dropdown can be determined by a variable of type boolean like:

And changing its value from true to false or vice versa will result in our dropdown being hidden or visible. For ReactJS our state can be found in an object named state of the class component:

Or with a functional component it will be whatever data type you want:

As for VueJS , it will be in an object named data:

If you have not yet figured out what state is here, please comment below for me to explain back to you.

3. State management

a. What is state management?

Because the state in your application can be represented of any data type as well as it can be scattered around small components (or not) so of course we also need to manage it. What you need to manage here will include how to place state A in which component, how to pass state B from component B to component C or how to change state X at component Y, … all This is related to where you manage the state in your application because sometimes if you don’t have basic rules or think about what you are going to do before getting into the code then it can. leading to many unpredictable consequences that you will not know later or others will know when they maintain your code.

b. ReactJS & VueJS state 101

When we started getting acquainted with ReactJS or VueJS, we all learned that a block of data named state can be created for any component we desire. This state will probably only exist and function inside that component or even be put down to components below it if the child components need to use it. As for how to create state if you do not know, then perhaps read the ReactJS or VueJS document depending on which item you are coding faster, the above example already exists. Our web application will normally be divided into many different components for easier reuse or management of UI components. For example below your website will be divided into many small components and it forms the shape of a tree:

Each green box you see can be treated as a component in your application and the component below will be the child component above. As I said at first, in any component in the picture above (green box) we can define a state for it. At the same time we can pass this state to the components below it. Let’s say we have a simple application that is to create a to-do list application with only two features as follows:

• Create a to-do task
• Display to-do list

First, for convenience of creation, we will need a modal component called <TodoItemModal /> . Next we also need to display the aforementioned list, so normally we will have 2 more components, <TodoList /> and <TodoItem /> . You can imagine it as simple as this:

Our state for this application will have to include a section that holds our to-do list and a part for importing content for the new job we need to do and both hiding or showing <TodoModal /> . From there we will have a new tree as follows:

However, when you start to code you will immediately realize a problem that every time we update the content of a job in <TodoModal /> , we will need to get the name the corresponding task that we want to update and display. in the name of the App so our <TodoModal /> displays this value for us to update. More precisely here we will need to do some way so that the two components <TodoList /> and <TodoModal /> can interact with each other. Of course if you remember what I said in that name is that this Sate will probably only exist and function inside that component or even be brought down to the components below it , based on this sentence, it is simple. The easiest that we can do is to put todoList from <TodoList /> component on App :

From now on, every time we need to update a job, we just need to get its corresponding name and update the name of the App and pass it down to <TodoModal /> appearing. At the same time we will also need to pass todoList down to <TodoList /> component to display. What we have just done above can also be called:

• Lifing state up in ReactJS
• And in VueJS, I have not found a similar name

Basically you can understand that this is a method used in case 2 or more of your components want to share part of the state, the traditional way is to put that state on to their closest common parent component. Here <TodoList /> and <TodoModal /> both need to use state todoList so we will put it on the common parent that is most needed App . For small applications, this should not be a problem at all, but if you still apply this method to all medium or large applications, it is catastrophic:

For example, our 3 red components need to share a piece of data, then we will need to put that piece of state in Component 1 and pass through many other components to get where we need it and it does manage everything. so a lot more complicated especially when you refactor a component this way. Because of this problem, I have come to Redux with ReactJS or VueX with VueJS

c. Redux and Vuex

Although it is the two libraries of ReactJS and VueJS, in fact, it works quite the same, both born to solve the problem above that we mention. Once you add it to your application, you will get another tree like this:

When using these 2 libraries, we will create a place called Store to store data shared in many places on our application such as information of whether the user is logged in or not or the access token to call. APIs for example, …. Now the data that our three red components are sharing can be put into the store and retrieved whenever needed without having to go through many other components. In fact, you can understand that this is still the way to put data on a common father, but here instead of being a component, it is the store. About how to operate or use these two libraries, I will not mention here because it is not the content of this article. However, if you think that with the support of these two libraries are already happy ending for you, it is not at all in my personal opinion, it has two sides so when bringing these two libraries into use. that means we also have to trade something. And what is specific, I will reveal it to you in the following article.

3. Conclusion

Finally thank you for reading my article and if you have any questions or suggestions, please comment below and do not forget to leave an upvote to support me.