Managing state in complex Angular applications can be a daunting task, especially as the application grows and the interdependencies between different parts of the application become more intricate. NgRx, a powerful state management library inspired by Redux, offers a robust solution to this challenge. In this blog post, we’ll delve deep into the key concepts of NgRx, how it can streamline state management, and best practices for integrating NgRx into your Angular projects. We’ll also provide a practical tutorial to help you get started with NgRx in your own Angular applications.

What is NgRx?

NgRx is a set of reactive libraries for Angular, built around the principles of reactive programming using RxJS. It provides a unidirectional data flow, which helps in maintaining a single source of truth for the application’s state. This makes it easier to manage and predict state changes, resulting in more maintainable and testable code.

Key Concepts of NgRx

Store

The store is the central repository where the state of the application is stored. It holds the state as a single immutable object. This centralization of state makes it easier to debug and understand the flow of data in your application.

Actions

Actions are payloads of information that send data from your application to your store. They describe what should be done, but not how. Actions are dispatched from components and services to trigger state changes.

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

export const loadItems = createAction('[Item List] Load Items');
export const loadItemsSuccess = createAction(
  '[Item List] Load Items Success',
  props<{ items: Item[] }>()
);

Reducers

Reducers are pure functions that take the current state and an action to return a new state. They specify how the application’s state changes in response to actions. Reducers should be kept simple and free of side effects.

import { createReducer, on } from '@ngrx/store';
import { loadItemsSuccess } from './item.actions';
import { State, initialState } from './item.model';

const _itemReducer = createReducer(
  initialState,
  on(loadItemsSuccess, (state, { items }) => ({ ...state, items }))
);

export function itemReducer(state: State | undefined, action: Action) {
  return _itemReducer(state, action);
}

Selectors

Selectors are functions that extract slices of state from the store. They are used to obtain pieces of state and compute derived states. Selectors help in decoupling component logic from the store structure.

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

export const selectItemState = createFeatureSelector<State>('items');

export const selectAllItems = createSelector(
  selectItemState,
  (state: State) => state.items
);

Effects

Effects handle side effects like asynchronous operations. They listen for actions dispatched to the store and perform tasks like HTTP requests or other operations, then dispatch new actions. Effects are a key part of NgRx that help keep reducers pure and side-effect-free.

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { loadItems, loadItemsSuccess } from './item.actions';
import { map, mergeMap } from 'rxjs/operators';
import { ItemService } from './item.service';

@Injectable()
export class ItemEffects {
  loadItems$ = createEffect(() =>
    this.actions$.pipe(
      ofType(loadItems),
      mergeMap(() => this.itemService.getAll().pipe(
        map((items) => loadItemsSuccess({ items }))
      ))
    )
  );

  constructor(
    private actions$: Actions,
    private itemService: ItemService
  ) {}
}

👀 For a hands-on tutorial please visit DevToys.io - Harnessing NgRx For Effortless Angular State Management for the full article! 🔥

🤓 Looking for more resources to become an expert in Angular stack? This is a MUST read!🔥