Angular State Management Using NGRX
- Varun Mittal (Unlicensed)
What is State?
The state is a part of your application, such as the list of customers, a list of products coming from a database is a type of state. Similarly, the events happening in the browser or the colour or the shape or a div is also a state.
What is State Management?
State-Management is the implementation of a Design Pattern; with the help of this design pattern, we can synchronize the application's state throughout all components of the application. This design pattern makes the implementation of services and handling of data coming from the database very easy. In simpler terms, State Management is a term that defines a way we can store data, modify it, and react to its changes.
State Management acts as a single source of truth for your application.
Benefits of State Management:
The State of the Whole Application is present in a single place, so we do not need to access the single state or data from different places.
If data changes or new data are being added, only then the request to the server will be sent, thereby reducing the number of HTTP requests.
State-Management helps to centralize and make code maintenance very easy; it also improves the quality of code by reducing the code size and making it more readable.
How Data Flows Without State Management:
In Angular applications, we usually maintain the data in the services. As the number of features increases, the number of services increases, which means data management becomes difficult.
As you look at the following picture, without state management, data is everywhere. You can’t really have a single source of truth for your data. This kind of setup is complicated to maintain, and it makes your development process slow.
How Data Flows With State Management:
When you have state management in place, data actually flows from your app to state and vice versa. You know exactly where your data is. In that way, you know exactly where your data is and that makes your development faster.
For example, You have some features in your app as below. State management can maintain the same structure as a database, and you can select the slice of data whenever you want in your app. Consider this as a local database in which you can query the data whenever you need it.
State Management In Angular:
NGRX Store is a state management library for Angular Apps. When your application gets bigger and bigger, communication becomes difficult to handle; NGRX provides unidirectional data flow. NgRx uses streams to interact with a data store. This data store connects to your components and services and ultimately simplifies the entire process of data management in your Angular application. Instead of injecting services everywhere and managing communication between them, NgRx manages your application from one singular source. Using NgRx, you work with your application in terms of its overall state instead of individual components.
Components that aware of the store are called smart components, and components that aren’t aware of the store are called dumb components.
Note: Refreshing or reloading the page will lose the entire state of the application.
For the NGRX Installation guide, refer to this link: NGRX Installation guide.
There are five parts that constitute NgRx:
Store/State: Your application’s state is maintained in the store. The store is immutable.
Actions: They are dispatched from the components and services. These are just unique events with type and payload and can be dispatched to the store. They modify the store's state using reducers (functions) that enable changes while keeping it immutable.
Reducers: These are the pure functions that take the latest action and current state and return the new state. A common flow is to fire off an action and then use a reducer to handle how that action interacts with the store. They are responsible for immutably updating the state data when an action is dispatched.
Selectors: Your application’s components can subscribe to the store and get automatic updates of the state through selectors. They enable components to get a slice (a part) of your application’s state and also mutate state with selector functions.
Effects: These are the functions that can be executed to get the new data for the state. For example, If your component needs new data from the API, the component dispatches an action, the reducers invoke the effects and services to get the new data, reducer returns the new state with that data from API.
Understanding the Data Flow:
The store is composed of various feature states that delegate their feature reducer. Actions are dispatched in our components based on user interaction or event. This action is composed of a type and an optional payload, which is used in the reducer to determine the state transition. The modified state data then can be fetched by the components using Selectors.
Conclusion:
State-Management is important to a great extent in large scale applications and it also makes the architecture and quality of code better than before. By managing the state, we will be able to optimize the performance in a perfect manner.
Don’t use it in every app and you need to make a decision based on several factors such as team, app size, learning curve, etc. Use state management based on your apps and design them carefully so that they can be extensible and maintainable.