I’ve been building Angular applications for years now, and there’s a moment in every project’s life when things start to get… messy. You know the feeling. A piece of data is needed in five different components. You’re passing it down through layers of inputs, or worse, you’re relying on services that are firing events in all directions. Debugging becomes a hunt, and adding a new feature feels like walking through a minefield. This is exactly why I started looking seriously at NgRx. It’s not for every app, but when your Angular project grows into a complex system with many moving parts, having a single source of truth for your state isn’t just nice—it’s essential.
Think of your application’s state as everything that defines what the user sees and interacts with at any given moment. It’s the list of products in a catalog, the items in a shopping cart, the user’s profile information, and even whether a loading spinner is visible. In a small app, you might keep this in a service. But what happens when two services need the same data? Or when an update in one corner of the app needs to instantly reflect in another? This is where a centralized store, like the one NgRx provides, changes the game.
NgRx is built on a simple, powerful idea: a unidirectional data flow. Everything that happens in your app—a button click, a successful API response, an error—is described as an action. It’s a plain object with a type and, optionally, some data. Components don’t directly change the state or call services. They just dispatch these actions, saying, “Hey, this thing happened.”
So, where does the change actually occur? That’s the job of reducers. A reducer is a pure function. It takes the current state and an action, and it returns a new state. It never mutates the old state; it creates a fresh copy with the necessary changes. This purity is what makes everything predictable and easy to test. Want to know how your state evolved? Just look at the sequence of actions that were dispatched.
But what about the real world? Apps need to talk to servers, read from local storage, or show notifications. These are side effects, and they don’t belong in a pure reducer. This is where NgRx Effects shine. Effects listen for specific actions, perform these side-effect operations (like an HTTP call), and then dispatch new actions back into the system with the results. It keeps your components and reducers clean and focused.
Let’s look at a concrete example. Imagine we’re building a user dashboard. We need to load a list of projects.
First, we define an action to trigger the load:
// dashboard.actions.ts
import { createAction, props } from '@ngrx/store';
import { Project } from '../models/project.model';
export const loadProjects = createAction('[Dashboard Page] Load Projects');
export const loadProjectsSuccess = createAction(
'[Dashboard API] Load Projects Success',
props<{ projects: Project[] }>()
);
export const loadProjectsFailure = createAction(
'[Dashboard API] Load Projects Failure',
props<{ error: string }>()
);Next, we create a reducer to manage the state for this feature:
// dashboard.reducer.ts
import { createReducer, on } from '@ngrx/store';
import * as DashboardActions from './dashboard.actions';
export interface DashboardState {
projects: Project[];
loading: boolean;
error: string | null;
}
const initialState: DashboardState = {
projects: [],
loading: false,
error: null
};
export const dashboardReducer = createReducer(
initialState,
on(DashboardActions.loadProjects, state => ({
...state,
loading: true,
error: null
})),
on(DashboardActions.loadProjectsSuccess, (state, { projects }) => ({
...state,
projects,
loading: false
})),
on(DashboardActions.loadProjectsFailure, (state, { error }) => ({
...state,
loading: false,
error
}))
);Now, we need an Effect to handle the API call. Notice how the effect isolates the side effect:
// dashboard.effects.ts
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { map, mergeMap, catchError } from 'rxjs/operators';
import { ProjectService } from '../services/project.service';
import * as DashboardActions from './dashboard.actions';
@Injectable()
export class DashboardEffects {
loadProjects$ = createEffect(() =>
this.actions$.pipe(
ofType(DashboardActions.loadProjects),
mergeMap(() =>
this.projectService.getProjects().pipe(
map(projects => DashboardActions.loadProjectsSuccess({ projects })),
catchError(error => of(DashboardActions.loadProjectsFailure({ error: error.message })))
)
)
)
);
constructor(
private actions$: Actions,
private projectService: ProjectService
) {}
}Finally, in our smart component, we dispatch the initial action and select the data we need. How do you think we efficiently pull just the loading flag or the projects list from the store? We use selectors. Selectors are memoized queries for your state. They compute derived data and only recalculate when their inputs change, which is a huge performance boost.
// dashboard.component.ts
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { loadProjects } from './store/dashboard.actions';
import { selectProjects, selectLoading } from './store/dashboard.selectors';
@Component({
selector: 'app-dashboard',
template: `
<div *ngIf="loading$ | async">Loading...</div>
<ul>
<li *ngFor="let project of projects$ | async">{{ project.name }}</li>
</ul>
`
})
export class DashboardComponent implements OnInit {
projects$: Observable<Project[]>;
loading$: Observable<boolean>;
constructor(private store: Store) {
this.projects$ = this.store.select(selectProjects);
this.loading$ = this.store.select(selectLoading);
}
ngOnInit() {
this.store.dispatch(loadProjects());
}
}This structure might seem like more code at first glance, and it is. That’s the trade-off. For a simple counter or a to-do list, it’s overkill. But can you see how, in a large application with dozens of features and developers, this pattern brings order? Every state change follows the same path: Action -> Reducer/Effect -> New State. Debugging is a matter of looking at a log of actions. Testing a reducer is just testing a function with inputs and outputs.
The true power reveals itself over time. When you need to add a new feature that uses the existing list of projects, you don’t have to trace where that data comes from or worry about creating a new service. You just use the same selector. The state is global, and the access pattern is consistent. It makes your application feel sturdy, like a well-built piece of furniture instead of a shaky house of cards.
So, is NgRx the right choice for your next Angular project? Ask yourself: Is my state shared across many unrelated parts of the app? Is the business logic becoming complex and intertwined? Will multiple developers be working on this codebase? If you answered yes, then investing time in learning this pattern will pay for itself many times over in maintainability and developer sanity. It transforms state management from a constant source of bugs into a reliable foundation.
I’d love to hear about your experiences. Have you tried NgRx in a large project? What was the biggest challenge or the most significant benefit you found? Share your thoughts in the comments below, and if this breakdown helped clarify things for you, please consider liking and sharing it with other developers who might be facing the same architectural decisions.
As a best-selling author, I invite you to explore my books on Amazon. Don’t forget to follow me on Medium and show your support. Thank you! Your support means the world!
101 Books
101 Books is an AI-driven publishing company co-founded by author Aarav Joshi. By leveraging advanced AI technology, we keep our publishing costs incredibly low—some books are priced as low as $4—making quality knowledge accessible to everyone.
Check out our book Golang Clean Code available on Amazon.
Stay tuned for updates and exciting news. When shopping for books, search for Aarav Joshi to find more of our titles. Use the provided link to enjoy special discounts!
📘 Checkout my latest ebook for free on my channel!
Be sure to like, share, comment, and subscribe to the channel!
Our Creations
Be sure to check out our creations:
Investor Central | Investor Central Spanish | Investor Central German | Smart Living | Epochs & Echoes | Puzzling Mysteries | Hindutva | Elite Dev | JS Schools
We are on Medium
Tech Koala Insights | Epochs & Echoes World | Investor Central Medium | Puzzling Mysteries Medium | Science & Epochs Medium | Modern Hindutva
