Click here to Skip to main content
15,389,719 members
Articles / Web Development / React
Tip/Trick
Posted 17 Aug 2021

Stats

13K views
7 bookmarked

Why Use State Management in Front End Code?

Rate me:
Please Sign up or sign in to vote.
4.53/5 (7 votes)
16 Jan 2022CPOL4 min read
Good reasons for using State Management in Front End Code
In this post, I share my personal experiences from using State Management in React, Angular and Vue.js. I started with ReactJS 2016, Angular 2018 and was lucky enough to learn Vue.js starting 2020. From the beginning, State Management was mentioned as a possible complement to each library.

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:

JavaScript
<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:

JavaScript
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):

JavaScript
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

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Gunnar S
Software Developer (Senior)
Sweden Sweden
I work as Senior Developer mainly in Microsoft environment and my strenghts are SQL, C#, Vue.js, Angular and ReactJS.

Comments and Discussions

 
QuestionI'd like to see more Pin
ShawnVN19-Jan-22 22:06
MemberShawnVN19-Jan-22 22:06 
QuestionArticle Pin
Mwasigala Caroline17-Aug-21 22:44
MemberMwasigala Caroline17-Aug-21 22:44 
AnswerRe: Article Pin
Gunnar S17-Aug-21 22:58
MemberGunnar S17-Aug-21 22:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.