Why Use State Management in Front End Code?

Summary

Good reasons for using state management in front end code are:

• as a database cache
• for broadcast messaging
• for centralized handling of loading indicators

Introduction

All State Management tools work according to the same principles:

• A Store, which is a global data storage accessible from anywhere in the code
• Actions: The data in the Store is updated via the dispatch of an Action. Think of this as a Setter, data (or state) is Set with an Action.
• Getters: If you have Setters, you need Getters, right? However, it’s only in Vuex the concept of “Getters” is used by name. In Redux and NgRx, there are selectors or, for Redux class components, the construction mapStateToProps is used as shown further below.

The following State Management tools are often used with the corresponding library:

• React & Redux/Recoil
• Angular & NgRx (very similar to Redux).
• Vue & Vuex
• Blazor & Fluxor

When I first heard about State Management, I didn’t understand what problem it was supposed to solve, and I wondered why it was needed. I had developed many web apps but had never had any problems with "states". Redux in ReactJS felt quite unnecessary and besides, Dan Abramow, the man behind Redux, says himself that before you start using Redux, you should make sure that Redux is really needed.

You Might Not Need Redux. People often choose Redux before they… | by Dan Abramov | Medium

This statement added to my doubts about Redux's excellence, it was fine to build React apps without Redux, Redux just became an unnecessary complication.

However, when I started using Vue.js and Vuex, I realized the benefits of State Management. Vue.js is a great language that can be seen as a further development of React and Angular. When you code Vue.js, you soon realize that Vuex will undoubtedly help you.

Database Cache

A database cache supplements your primary database by removing unnecessary pressure on it, typically in the form of frequently accessed read data. Most web applications have a database. The Store is sometimes called the "single source of truth" but I regard the database as the "single source of truth". The Store is nothing else but a cache for the database.

However, it was a specific problem that made me understand the usefulness of State Management, namely "Broadcast Messaging":

Broadcast Messaging via State Management

Broadcast Messaging is about letting one component send messages to many other components. The other components can be located anywhere in the application's component tree. Usually, communication between components takes place according to the "from parent to child" pattern. In the case of Broadcast Messaging, it is the “one to many” pattern.

The need for “one to many” communication will sooner or later appear in most applications. This can be achieved in different ways but in my opinion, the easiest and cleanest way is to use State Management. As a matter of fact, a long time ago, I wrote an article about Broadcast Messaging in Angular without using NgRx. Today, I would choose NgRx for this purpose.

Controlling Loading Indicator via State Management

A second good reason to use State Management is the benefit of a centralized handling of the loading indicator. A loading indicator should be used in every front end application to indicate that data is being fetched from the server. Often, programmers introduce a local status flag in each component instead of using one single flag in State Management.

I have noticed that in the tutorials for Vuex, Redux and NgRx, there is a state used as a status flag with the values ‘idle’ and ‘loading’. It is highly recommended to use this status flag together with, for example, a font awesome spinner icon to indicate that data is being retrieved from backend.

ReactJS/Redux Example

A Font Awesome spinner is used: https://fontawesome.com/v5.15/icons/spinner.

This code is from a React class component:

<FontAwesomeIcon
    icon={faSpinner}
    size={'2x'}
    spin
    style={this.props.status === 'idle' ? {opacity:'0'}:{opacity:'1'}} />

Here, the status flag is called “this.props.status” and is retrieved via the mapStateToProps construction:

const mapStateToProps = state => ({
   …
  status: state.photos.status
});

In a React Functional Component using React hooks, the status flag is accessed with useSelector, as follows (simplified version):

Import
…
  selectUserStatus
} from './userSlice';

const status = useSelector(selectUserStatus);

<FontAwesomeIcon
   icon={faSpinner}
   size={'2x'}
   spin s
   style={status === 'idle' ? {opacity:'0'}:{ opacity:'1'}} />

Today, I see no excuse for not using Redux (or Recoil )in React or Vuex in Vue.js. Since Angular has two way databinding it seems like state management is rarely used with Angular. However, for broadcast messaging in Angular, please refer to the article, Broadcast Messaging in Angular.

I am looking forward to seeing your comments!

History

• 17^th August, 2021: First release
• 16^th January, 2022: Added database cache comment