Introduction to state management with Ngrx and Angular

What is State Management 📝

Before defining state management, let’s define what is a State

“A state is a representation of a system in a given time.”

When it comes to front-end applications, the state can be :

Types of State 📰

• Navigation State: where the currentUser and the current route with current params?
• UI State: a modal is open or not, the button submit disabled or enabled, etc...
• Application State: the kind of state that can be sued by different parts of the application like the current user is logged or not
• Network State: if there is a current process of fetching data from APIS
• Communication state: values that describe requests to other servers (such as a “loading” value)

State Management 📰:

Problem ❌ :

Nowadays, web applications are getting growth in complexity, by consequence managing tasks like (sharing data between components, networks, user actions, UI state, etc ) becomes a hard task

Solution :

Defining a way that takes care of defining the global state across all the applications with the operations to manipulate this state ( add, delete, change, etc ..) and facilitate communication and sharing of data across components

Benefits of State Management 🔥 💥 :

Applying the state management pattern to your front-end application can offer a lot of advantages and benefits :

• Centralized State: State in a store is kept in one directory. It makes it easier to foretell updates or changes to the store, and track down problems ( single source of truth ) ✔️
• Performance (Data flows in one direction) ✔️
• Applications become easier to test (more organized, State representation is easy to read, data accessible whenever we need it)✔️