Introduction

Managing state is essential in modern web applications, especially as they grow in size and complexity. Redux, introduced in 2015, is a JavaScript library for managing application state predictably. It relies on principles like having a single source of truth, immutability, and explicit state changes through actions. These ideas became fundamental for building scalable applications, influencing other tools like NgRx Store.

Angular developers have traditionally used NgRx Store, but with the release of Signals in Angular 16, a simpler, reactive alternative has emerged. So, how do these approaches differ, and in which scenarios does each offer the most advantages?

Let’s dive in.

What is NgRx Store, and How Does It Work?

 NgRx Store was introduced in 2017 to bring Redux-like state management to Angular. Built specifically for Angular, NgRx Store leverages its reactive nature and deep integration with RxJS. It provides a structured, centralized way to manage application state, making it particularly useful for large-scale applications.

The Key Concepts of NgRx Store

NgRx Store organizes state management around five building blocks: state, actions, reducers, selectors, and effects. Let’s break them down.

1)    State (or Store)

The state is the single source of truth in your app, holding all the data in a centralized, immutable tree. The store is the container for this state, enabling consistent, predictable state management across the application.

Here’s an example of defining state:

export interface AppState {
  users: UserState;       // Manages user-related data
  products: ProductState; // Manages product-related data
}

export const initialState: AppState = {
  users: { list: [], loading: false },
  products: { items: [], error: null }
};

2)    Actions

Actions are objects that describe events occurring in your app. They are the only way to signal that something happened and initiate a state change.

Example actions:

import { createAction, props } from '@ngrx/store';

export const loadUsers = createAction('[Users] Load Users');
export const addUser = createAction('[Users] Add User', props<{ user: User }>());

3)    Reducers

Reducers handle how the state changes in response to actions. They are pure functions that take the current state and an action, returning a new immutable state.

Here’s how a reducer works:

import { createReducer, on } from '@ngrx/store';
import { addUser } from './actions';

export const initialState: User[] = [];

export const userReducer = createReducer(
  initialState,
  on(addUser, (state, { user }) => [...state, user]) // Return a new array with the added user);

4)    Selectors

Selectors are functions that extract specific data from the store. Instead of accessing the state directly, selectors allow you to query and compute data in a reusable way.

Example selector:

import { createSelector } from '@ngrx/store';

export const selectUsers = (state: AppState) => state.users;
export const selectUserCount = createSelector(selectUsers, (users) => users.list.length);

5)    Effects

While reducers handle synchronous updates, effects are responsible for managing asynchronous operations like API calls. Effects listen for dispatched actions, perform side effects, and then dispatch new actions with the results.

Here’s an example of an effect:

import { Injectable } from '@angular/core';
import { createEffect, ofType, Actions } from '@ngrx/effects';
import { UserService } from '../services/user.service';
import { loadUsers, loadUsersSuccess, loadUsersFailure } from './actions';
import { mergeMap, map, catchError } from 'rxjs/operators';
import { of } from 'rxjs';

@Injectable()
export class UserEffects {
  constructor(private actions$: Actions, private userService: UserService) {}

  loadUsers$ = createEffect(() =>
    this.actions$.pipe(
      ofType(loadUsers),
      mergeMap(() =>
        this.userService.getUsers().pipe(
          map((users) => loadUsersSuccess({ users })),
          catchError((error) => 
of(loadUsersFailure({ error: error.message })))
        )
      )
    )
  );
}

What Are Signals, and How Do They Work ?

Introduced in Angular 16, it represents a push-based, reactive way to manage state in Angular applications. They simplify state management by eliminating common challenges developers face when working with tools like NgRx Store or RxJS Observables, such as dispatching actions and managing subscriptions.

Signals vs. Dispatch/Subscription in NgRx Store

No Dispatching Actions: In NgRx Store, state updates require defining actions and dispatching them to trigger reducers, which can be verbose. Signals eliminate this by allowing direct state updates using set() or update() methods.

●      NgRx Store Example:

this.store.dispatch(addUser({ user }));

●      Signals Example:

this.users.set([...this.users(), user]);

No Manual Subscriptions: NgRx Store (and RxJS) often requires subscribing to Observables and manually unsubscribing to avoid memory leaks. Signals automatically track dependencies, updating the UI whenever state changes without subscriptions.

●      NgRx Store Example:

this.store.select(selectUsers).subscribe(users => this.users = users);

●      Signals Example:

<ul>
  <li *ngFor="let user of users()">{{ user.name }}</li>
</ul>

Push-Based State in Signals

Signals use push-based reactivity, automatically updating the dependent parts of the UI when state changes. Unlike NgRx Store’s centralized flow, Signals directly manage state with less boilerplate, focusing on simplicity and performance.

Here’s a practical example of how push-based reactivity works:

import { Component, signal, computed } from '@angular/core';

@Component({
  selector: 'app-user-list',
  template: `
    <h1>Total Users: {{ userCount() }}</h1>
    <ul>
      <li *ngFor="let user of users()">{{ user.name }}</li>
    </ul>
    <button (click)="addUser()">Add User</button>
  `
})
export class UserListComponent {
  // Signal to store the user list
  users = signal([{ name: 'Alice' }, { name: 'Bob' }]);

  // Computed Signal to calculate derived state
  userCount = computed(() => this.users().length);

  // Method to add a new user
  addUser() {
    const newUser = { name: `User ${this.users().length + 1}` };
    this.users.set([...this.users(), newUser]); // Pushes the state update
  }
}

When Should You Use NgRx Store or Signals?

The choice between NgRx Store and Signals depends on the complexity and scale of your application. Here’s how to decide :

NgRx Store :

• Best for large-scale apps with complex state shared across multiple components.

• Provides centralized state, great for debugging and time-travel tools.

• Use when you need side-effect management (e.g., effects for API calls).

Signals

• Ideal for smaller apps or localized state management.

• Offers a lightweight and reactive-first approach without much boilerplate.

• Use when simplicity and direct reactivity are key priorities.

To summarize, if your application has a shared state across multiple modules, requires complex side-effect handling, or needs strong debugging tools, NgRx Store is the right choice. On the other hand, for simple or localized scenarios, Signals offer a faster, cleaner solution with less setup.

Can you Use Both?

Yes! While both tools serve state management needs, they are best suited for different scenarios. In some cases, you might even consider a hybrid solution to leverage the strengths of each.

• NgRx for Global State: Use NgRx Store to manage complex, shared application-wide state (e.g., authentication, user roles, or API data). Its structure and tooling are perfect for such use cases.

• Signals for Local State: Use Signals for localized, component-specific state, such as UI toggles, input values, or temporary form data. This minimizes boilerplate for simpler, isolated parts of your app.

Conclusion

Ultimately, the right tool depends on your specific needs. If your app’s state is highly shared, centralized, and requires robust debugging, NgRx Store is the way to go. If your goal is simplicity, localized state management, and better performance, Signals are a great choice. And for the best of both worlds, don’t hesitate to mix them where appropriate!