Category: Angular

State management is a crucial aspect of building robust and scalable web applications. It involves handling and synchronizing the application’s state across various components. Angular, being a popular front-end framework, offers several ways to manage state, such as using services, observables, and third-party libraries like NgRx. In this blog, we’ll explore a simple yet effective approach to state management using Angular services, signals, and LocalStorage.

Bellow is example of state management using NgRx

Understanding the Approach of state management using Signals

In this state management approach, we’ll use two service files: app-state.service.ts and signal.service.ts. The AppStateService will be responsible for managing and retrieving application states, while the SignalService will handle the signaling mechanism between components. The states will be stored both in memory and in the browser’s LocalStorage.

Let’s dive into the code and understand each part step by step.

The SignalService (signal.service.ts)

The SignalService is responsible for managing signals that can notify subscribers whenever there is a change in a particular state. It uses RxJS’s Subject and BehaviorSubject to accomplish this.

// signal.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SignalService {
  private signals: { [key: string]: Subject<any> } = {};

  // Dispatch a signal to notify subscribers of a state change
  dispatchSignal(signalName: string, data?: any) {
    if (this.signals[signalName]) {
      this.signals[signalName].next(data);
    }
  }

  // Update the value of a signal (or create a new one if not exists)
  updateSignalValue(key: string, newValue: string): void {
    const signal = this.signals[key];
    if (!signal) {
      this.signals[key] = new BehaviorSubject<string>(newValue);
    } else {
      signal.next(newValue);
    }
  }

  // Subscribe to a signal to receive state change notifications
  subscribeToSignal(signalName: string): Subject<any> {
    let signal = this.signals[signalName];
    if (!signal) {
      signal = new Subject<any>();
      this.signals[signalName] = signal;
    }
    return signal;
  }
}

The AppStateService (app-state.service.ts)

The AppStateService is responsible for managing application states and interacting with the SignalService for state change notifications. It also uses LocalStorage to persist the states, ensuring the state is retained even if the user refreshes the page or navigates away.

// app-state.service.ts

import { Injectable } from '@angular/core';
import { SignalService } from './signal.service';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AppStateService {
  private states: { [key: string]: any } = {};

  constructor(private signalService: SignalService) {
    this.loadStatesFromLocalStorage();
  }

  // Load states from LocalStorage during service initialization
  private loadStatesFromLocalStorage() {
    const savedStates = localStorage.getItem('appStates');
    if (savedStates) {
      this.states = JSON.parse(savedStates);
      for (const key in this.states) {
        if (this.states.hasOwnProperty(key)) {
          const value = this.states[key];
          this.signalService.updateSignalValue(key, value); 
        }
      } 
    }
  }

  // Get the state with a given key from the SignalService or LocalStorage
  getState(key: string): Observable<string> {
    const fromSignal = this.signalService.subscribeToSignal(key);
    const fromLocal = localStorage.getItem(key);

    return fromSignal || of(fromLocal || '');
  }

  // Set the state with a given key and value
  setState<T>(key: string, newState: T) {
    this.states[key] = newState;
    this.saveStatesToLocalStorage();
    this.signalService.dispatchSignal(key, newState);
  }

  // Save the current states to LocalStorage
  private saveStatesToLocalStorage() {
    localStorage.setItem('appStates', JSON.stringify(this.states));
  }
}

Putting It All Together

With these two services in place, you can now manage your application states efficiently. Let’s see how you can use them in your components:

1: Inject the AppStateService in your components.

import { Component, OnInit } from '@angular/core';
import { AppStateService } from './app-state.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  stateValue: string;

  constructor(private appStateService: AppStateService) { }

  ngOnInit() {
    // Subscribe to the state with key 'yourStateKey'
    this.appStateService.getState('yourStateKey').subscribe((value) => {
      this.stateValue = value;
    });
  }

  // Update the state with key 'yourStateKey' when needed
  updateState() {
    const newValue = 'New State Value';
    this.appStateService.setState('yourStateKey', newValue);
  }
}

By using this approach, you have a centralized way to manage your application states, and the components can interact with the states without direct coupling. Any change to the state triggers notifications to all subscribed components, ensuring data consistency throughout your application.

Conclusion

In this blog, we explored a simple and effective approach to state management in Angular using services, signals, and LocalStorage. By adopting this approach, you can maintain a clear separation of concerns and ensure a more organized and scalable codebase. Additionally, the use of LocalStorage allows the application to persist states across page reloads, enhancing the user experience.

Remember that this is just one of many state management solutions in Angular, and the best approach depends on the complexity and specific requirements of your application. However, the combination of services, signals, and LocalStorage offers a great starting point for many projects. Happy coding!

In Angular, we use state management libraries like ngrx to handle complex data flows in large applications. ngrx is a reactive state management library based on the Redux pattern, which provides a way to manage state changes in Angular applications. It uses Observables, Actions, Reducers, and Effects to manage state changes.

In this blog, we will discuss the steps to use ngrx in an Angular application and understand its flow.

What is NgRx?

NgRx is a library that provides a way to manage the state of an Angular application in a predictable and scalable way. It is based on the Redux pattern, which is a state management library for JavaScript applications. NgRx provides a set of APIs that allow you to store and retrieve data in a central location called the store. The store is a single source of truth for the application state.

How NgRx works in background

NgRx is based on the Redux pattern, which consists of three main components: the store, actions, and reducers.

Store

The store is a centralized data store that holds the entire state of the application. It is a read-only data store, and it can only be modified by dispatching actions.

Actions

Actions are plain JavaScript objects that represent an event that occurred in the application. An action can be dispatched to the store to update the state. Actions have a type property that identifies the type of action being dispatched and a payload property that contains data associated with the action.

Reducers

Reducers are pure functions that receive the current state of the application and an action and return a new state. Reducers are responsible for updating the store with new data based on the actions that are dispatched.

The flow of NgRx consists of the following steps:

Dispatch an action

To update the state of the application, an action needs to be dispatched to the store. An action is a plain JavaScript object that has a type property and an optional payload property.

Reducers handle the action

When an action is dispatched, it is passed to the reducers. The reducers are responsible for updating the store based on the action that was dispatched.

Update the store

The reducers create a new state based on the current state of the application and the action that was dispatched. The new state is then stored in the store.

Selectors retrieve data

To retrieve data from the store, selectors are used. Selectors are functions that take the current state of the application and return a subset of the state.

Components subscribe to selectors

Components can subscribe to selectors to get notified when the state of the application changes. When the state changes, the selector returns a new value, and the component is updated with the new data.

How to implement NgRx into angular code

Conclusion

In this blog, we explored how to use NgRx in Angular, how it works in the background, and its flow. NgRx is a powerful state management library that helps in handling complex data flows and managing state in a predictable way. With NgRx, you can store and retrieve data in a central location called the store, and update the store by dispatching actions. Reducers are responsible for updating the store based on the actions that are dispatched, and selectors are used to retrieve data from the store. Components can subscribe to selectors to get notified when the state of the application changes.