State Management? Why it is a MUST have in SPAs

Share with your friends!

Nowadays most of the web applications are implemented as a SPA(Single Page Application) and there are lots of libraries and resources available to fill the gaps within the development process and to speed up the development. React, Angular and Vue are the most trending SPA solutions and has huge community bases for each one. They came up with different approaches and solutions for the issues encountered during the development.

Let’s get into State Management. First, let me explain what is a state. The state is a data member defines a value at a certain time of the application life cycle. Managing those states as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable way explains the State Management in simple terms. State Management separates the business logic from rendering, that allows testing two parts independently.

If you are a developer with updated tech stack and has an awareness about the tech trends, with the word State management Redux, ngRx or Vuex should be the words came into your mind.

The process of state management defines a centralized data store which manages a shared state between the application components. The state object is read-only and only can be mutated in a predictable way.

State Management
image credit: vuejs.org

As on the Image above, Components can notify the defined actions when there is a user action, then store identifies the request from the view and manages the state respectively. Later, It triggers the update of the states and the view re-renders based on the difference between old and new states.

Benefits of State Management

Structuring of the application
Whether you are doing functional programming or object-oriented one, you need to keep an eye of the site’s structure about variables, actions, and views. State Management helps it easily with their stored statements.

Debugging
State Management stores all the data of users and site as object variables. This is very helpful when identifying bugs in the development process and it saves a lot of time of the developer.

One-way data flow
This allows you to understand what is going on in your application in a more predictable way. This can be seen in the above image in a more clear way.

Improves the scalability
When we are maintaining separates states in our application in a perspective of different module still, you can combine them in a single state in the root module and scale the root state with any number of isolated states.

There are many benefits of using State Management and these are the topics I think more important and kind of good to know. Now I am going to state the three principles defined in Redux, but applicable for all the state management methodologies.

Three Principles

Single source of truth
The state of your whole application is stored in an object tree within a single store.

State is read-only
The only way to change the state is to emit an action, an object describing what happened.

Changes are made with pure functions
To specify how the state tree is transformed by actions, you write pure reducers.

History of State Management tools

Redux – June 2, 2015
Initial release tag

ngRx – 3 May, 2016
This is released with Angular 2.
Initial release tag

vuex – 16 Feb, 2016
Initial release tag

Summary

State management is something to plan ahead, it is not something you want to add in late into the project, planning ownership of the application’s state is crucial to your success in building apps that do not get rotten so quickly. State Management adds value to the project when you are developing a large application having many components. Otherwise, the time spends for the configuration will become an overhead to the project.

Leave a Reply

Your email address will not be published. Required fields are marked *