Managing your State Application in Javascript

Introduction

Redux, Vuex, and other technologies come to mind when we hear the phrase state in Javascript. But in this article, I'm going to give an in-depth explanation of what state is and how to manage your state application in pure Javascript.

As a developer, you'll hear the term state quite frequently. But what exactly is the term "State"? It turns out that it's not a tough or React-specific idea. You'll be working with state whether you're doing frontend or backend web development, using JavaScript, a framework like React, Angular, or Vue, or not.

Prerequisites

This course assumes you know how to use JavaScript at a basic level. You'll need a rudimentary understanding of variables, Dom, arrays, functions, ES6+ JavaScript features, and objects, but you don't need any prior experience managing state in javascript as this tutorial will give you an in-depth explanation of what state is and how to manage the state of your application.

This article will cover the following:

• Brief intro to State in Javascript?
• What is State in Programming?
• How does it work?
• Why Should I manage the state of my application?
• Conclusion

Brief intro to State in Javascript?

It's your data's current "state."... You update your data object rather than trying to target and change components in the DOM when the user does something. In other words, the state is anything that can change based on user input.

Now, let's look at a simple explanation of state:

Example One

Think of state in a real-world

A person walks into a restaurant placed an order and then the food is brought to him now the current state of that food is hot and if the person leaves the food for some minute it gets cold and then the new state of the food is cold, This is what state means in a real-world example an object changing from its current state to a new state.

What is State in Programming?

The state of an object in object-oriented programming is the sum of the object's original values plus any changes made to them. A process, transaction, or setting's current or last-known status or condition. Keeping track of the process is known as "maintaining state" or "managing state."

Now, let's look at an example of state in programming:

Example Two

let name =" "

In the preceding example, we create a variable name that has an empty string, now the current state of the variable is undefined because no value is passed to the variable.

In the following example, a name is being passed to the variable and then it returns the current state of the variable with the name of the person.

let name ="John"

Output:

N.B. State is the current state of your program.

Now that we know the definition of state, let's look at a quick code example to understand it better.

Example Three: A simple Message Request

In the following code example, we will work with a component in our state.

First, let's create a simple component with a messageRequest function.

let messageRequest = function () {
    return '<p>' + messageRequest.state.greeting + messageRequest.state.name + ', ' + messageRequest.state.message + '? </p>';
};

Next, we create an object which contains the state of our data.

messageRequest.state = {
    greeting: 'Hello ',
    name: ' John Smith ',
    message: ' I would love you to add me to your Linkedin network '
}

Now that we have created an object which contains the state of our data, let's move to the next step:

The next step is to render our application.

let app = document.querySelector(# app');
app.innerHTML = messageRequest();

Finally, this is the output of our application.

Hello John Smith, I would love you to add me to your Linkedin network?

Bonus tip: The benefit of assigning state to a component like this is that you no longer have to worry about targeting particular parts and altering certain aspects of them.

You change the state and then render the template with a scoped component. You don't have to go looking for specific items.

How does it work?

Now, let's look at another example on codepen:

Codepen

In the above code example in our Codepen, we create a counter which increases a number with the following steps:

• First, we create an object which will represent our data's starting state
• Next, we create our components that return a template string.
• Now, for the changes to update in our DOM we create a render function.
• We create a function that updates the current number when we click on the increment button

N.B: Your data is the only arbiter of truth, which makes upgrading the user interface more straightforward and consistent.

Why should I manage the State of my Application?

Several reasons why managing your state is ideal:

• It helps you write well-structured, responsive code without having to worry about your bundle getting too big.
• It increases the flexibility and robustness of your JavaScript coding!
• Manipulation of the DOM and state logic is simple and feasible.
• Managing the state of your application also provides you with a snapshot of all of your data at a specific point in time. As a result, you'll always know where your data is, which will speed up your work.
• Only when data changes or new data is added will a request to the server be sent.

Conclusion

A state is a JavaScript object that stores the dynamic data of a component and allows it to follow changes between renderings. It's a combination of all those different states. For instance, if the user is not authenticated, is the modal open.

Managing the state of your application is extremely hard I think this is one of the reasons why applications tend to become complex. Hopefully, this article has given you a good understanding of what state is and how to manage your application without any library.