Achieve Ultimate Excellence

Managing State in Angular with NgRx

5 min read

State management is an integral part of developing modern web applications. In Angular, one popular library for handling state management is NgRx. In this blog post, we'll delve into the concept of state management, explore NgRx, and walk through building a sample application using NgRx.

Introduction to State Management with NgRx

What is State Management?

State management refers to the handling of the data state across components in an application. It ensures that components can access the required data when needed and can alter the state consistently.

Why NgRx?

NgRx is a state management library designed for Angular applications. Built around the principles of Redux, it employs Observables from RxJS, allowing for a reactive approach to state management.

Key Features of NgRx:

Immutable State: Ensures that the state cannot be changed directly, enforcing a predictable flow of data and making the state easier to track and test.
Actions: Represent the events in the application. They are plain objects that describe what happened, containing a type and an optional payload to convey information about the event.
Reducers: Functions that determine how the state changes in response to an action. They take the current state and an action, then return a new state without altering the existing one.
Effects: Handle side effects, such as asynchronous operations (e.g., API calls). They listen for actions dispatched from Store, perform operations, and then dispatch new Action(s) to Store or navigate to a different path, etc.
Selectors: Provide a way to query and derive information from the state. They can be used to obtain slices of state or compute derived values, enabling more efficient and maintainable state queries.
Store: A controlled container that holds the state tree of your application. It combines the actions, reducers, and state, providing a single source of truth and making state manipulation transparent and predictable.

Building a Sample Application Using NgRx

Creating an application with NgRx involves understanding and implementing various core concepts like actions, reducers, effects, and selectors. Here's a step-by-step guide to building a to-do list application using NgRx:

Step 1: Installation

Start by installing NgRx in your Angular project:

ng add @ngrx/store

Step 2: Define Actions

Actions represent the various events that can occur in your application. For a to-do list, you might need actions for adding, updating, and deleting tasks:

export const addTask = createAction('[Task Component] Add Task', props<{ task: Task }>());
export const updateTask = createAction('[Task Component] Update Task', props<{ task: Task }>());
export const deleteTask = createAction('[Task Component] Delete Task', props<{ id: string }>());

Step 3: Create Reducers

Reducers handle the logic of how the state changes in response to actions. Here's how you might define the reducers for the to-do list actions:

export const taskReducer = createReducer(
  initialState,
  on(addTask, (state, { task }) => [...state, task]),
  on(updateTask, (state, { task }) => state.map(t => t.id === task.id ? task : t)),
  on(deleteTask, (state, { id }) => state.filter(t => t.id !== id))
);

Step 4: Effects (Optional)

If you need to manage side effects such as API calls, you can use NgRx Effects:

@Injectable()
export class TaskEffects {
  constructor(private actions$: Actions, private taskService: TaskService) {}

  loadTasks$ = createEffect(() =>
    this.actions$.pipe(
      ofType(loadTasks),
      mergeMap(() => this.taskService.getAll()
        .pipe(
          map(tasks => loadTasksSuccess({ tasks })),
          catchError(() => EMPTY)
        ))
    )
  );
}

Step 5: Set Up Store

Next, set up the NgRx store in your application's main module:

@NgModule({
  imports: [
    StoreModule.forRoot({ tasks: taskReducer }),
    EffectsModule.forRoot([TaskEffects]),
  ],
})
export class AppModule { }

Step 6: Connect Store with Components

Connect your Angular components to the state by dispatching actions and selecting parts of the state using the store:

@Component({
  // ...
})
export class TaskComponent {
  tasks$: Observable<Task[]>;

  constructor(private store: Store<{ tasks: Task[] }>) {
    this.tasks$ = store.pipe(select('tasks'));
  }

  addTask(task: Task) {
    this.store.dispatch(addTask({ task }));
  }
}

Step 7: Utilize Selectors

For more complex state queries, use selectors to efficiently extract specific parts of the state:

export const selectAllTasks = (state: AppState) => state.tasks;

Conclusion

Managing state in Angular with NgRx provides a robust, scalable solution for handling complex state logic. By embracing immutable data, clear action handling, and reactive programming, NgRx enables more maintainable and extensible code.

Building an application with NgRx requires an understanding of its core principles and careful construction of actions, reducers, and connections between your store and components. The example above illustrates a simple use case, but NgRx can be extended to handle much more complex scenarios.

Embracing NgRx in your Angular projects can lead to more predictable, testable, and efficient applications, making it a worthwhile investment for many developers.

Article By,