How to use Redux in an Angular application

Redux is a reactive state management library developed by Facebook and used in the React library. This library is based on the Flux pattern. The main difference between Flux and Redux is how they handle actions; in the case of Flux, we usually have multiple stores and a dispatcher, whereas Redux has a single store, which means a dispatcher is not needed.

To use Redux in the Angular framework, we can use the NgRx library. This is a reactive state management library. With NgRx, we can get all events (data) from the Angular app and put them all in the same place (Store). When we want to use the stored data, we need to get it (dispatch) from the store using the RxJS library. RxJS (Reactive Extensions for JavaScript) is a library based on the Observable pattern that is used in Angular to process asynchronous operations.

So far, so good, but why should we use Redux in an Angular application instead of a shared service for example? We can use a service to share data between components (make sure to unsubscribe the observable every time, otherwise you risk needlessly running the observable in the background, which consumes resources) or we can use the Input/Output data flow (make sure the components have a parent/child relationship).

We can also use ViewChild for nested components. But in the case of a large project, these solutions will increase the project complexity. If we have a large number of components, we risk losing control over the data flow within a component (where did this data come from and what is its intended destination?)

This is the reason why we use Redux in Angular: the store and the unidirectional data flow reduce the complexity of the application. The flow is more clear and easy to understand for new team members.
 

In this article, we will try to demonstrate how easy it is to use Redux and the NgRx library by creating a simple Todo application. But before starting the development, we need to ensure that we have installed angular-cli on our computer. To check this, open a command prompt or a terminal and type ng --version. If you don’t see something like this (see figure 1), please refer to the tutorial available here to install angular-cli on your machine. Now that everything is set up, we’re ready to start on our Todo app.

The first step is to generate a new Angular CLI application using the following command in the terminal: ng new ngrx-todo

As soon as the Angular app is created, we can check if everything is working the way it should be by typing ng serve inside the terminal and by testing the bootstrap app on a browser by going to http://localhost:4200.

Some dependencies will need to be installed:

To save the ToDo app’s data, we will use a REST API because we want to be able to do some CRUD operations with it. To accomplish this, we’ll use JSON Server; this will save the ToDo’s in a JSON file so that we can access this file using HttpClient from Angular.

After the project setup is done, we can start to implement our ToDo app. The first step is to create a new module for our app (we need to do this because we’ll consider the app.module as the core module of the entire application). To do this, we run ng g module todos in the terminal and after that, we import this module in the app.module.ts file as can be seen below:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppRoutingModule } from './app-routing.module';
import { TodosModule } from './modules/todos/todos.module';
 
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    TodosModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here is the folder structure of the TodosModule that we will use for the components and the common files (services, headers, models, etc.):

After we have the application structure, we can start to code. The first step is to import the modules that we need to use in our todos.module.ts :

imports: [
    CommonModule,
    HttpClientModule,
    NgbModule,
    FormsModule,
    ReactiveFormsModule,
    NgxPaginationModule,
    StoreModule.forRoot({})
  ],
  providers: [TodosService]

By adding the StoreModule, this means that our module has a Store now. 

In NgRx, the Store is like an internal database that reflects the state of our application. All of the StoreModule's data will be contained in the Store. Now we can write our todos action. 

An action is a class that implements the NgRx action interface. Action classes have two properties:

For example, to get the todo list, we need the following actions:

import { Action } from '@ngrx/store';
import { Todo } from '../../models/todo';
 
 
export enum TodosActionType {
  GET_TODOS = 'GET_TODOS',
  GET_TODOS_SUCCESS = 'GET_TODOS_SUCCESS',
  GET_TODOS_FAILED = 'GET_TODOS_FAILED'
}
 
export class GetTodos implements Action {
  readonly type = TodosActionType.GET_TODOS;
}
 
export class GetTodosSuccess implements Action {
  readonly type = TodosActionType.GET_TODOS_SUCCESS;
  constructor(public payload: Array<Todo>) { }
}
 
export class GetTodosFailed implements Action {
  readonly type = TodosActionType.GET_TODOS_FAILED;
  constructor(public payload: string) { }
}
 
export type TodosActions = GetTodos |
  GetTodosSuccess |
  GetTodosFailed;

In order to get the todo list from the REST API, we will have an action for each type of call. These actions will be used in the reducers. 

A reducer is a function that knows what to do with a given action. The reducer will take the previous state of the app from the store and return the new state. Also, a reducer is a pure function. In JavaScript, a pure function means its return value is the same for the same arguments and has no side effects (outer scope is not altered). To get the todo list, use the reducers as shown below:

import { TodosActions, TodosActionType } from './todos.actions';
import { Todo } from '../../models/todo';
 
export const initialState = {};
 
export function todosReducer(state = initialState, action: TodosActions) {
 
  switch (action.type) {
 
    case TodosActionType.GET_TODOS: {
      return { ...state };
    }
 
    case TodosActionType.GET_TODOS_SUCCESS: {
      let msgText = '';
      let bgClass = '';
 
      if (action.payload.length < 1) {
        msgText = 'No data found';
        bgClass = 'bg-danger';
      } else {
        msgText = 'Loading data';
        bgClass = 'bg-info';
      }
 
      return {
        ...state,
        todoList: action.payload,
        message: msgText,
        infoClass: bgClass
      };
    }
 
    case TodosActionType.GET_TODOS_FAILED: {
      return { ...state };
    }
}

With the GET_TODOS_SUCCESS action, we can see that the reducer returns an object that contains the todo list, a message, and a CSS class. This object will be used to display the todo list in our application. Also, the actions can be used in Effects.

An Effect uses streams to provide new sources of actions to reduce states based on external interactions such as REST API requests or web socket messages. In fact, Effects are a kind of middleware we use to receive a new state of the store data. For example, to get the list of todos, we need to have the following service:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';
import { Todo } from './../../models/todo';
import { headers } from '../../headers/headers';
 
@Injectable({
  providedIn: 'root'
})
export class TodosService {
 
  baseUrl: string;
 
  constructor(private http: HttpClient) {
    this.baseUrl = 'http://localhost:3000';
  }
 
  getAPITodos() {
    return this.http.get(`${this.baseUrl}/todos`, { headers })
      .pipe(catchError((error: any) => throwError(error.message)));
  }
}

This is a simple way to get data from the API. The getAPITodos method returns an observable.

And the effects of this service will be the following:

import { Injectable } from '@angular/core';
import { Actions, Effect, ofType } from '@ngrx/effects';
 
import { TodosService } from './../../services/todos/todos.service';
 
import {
  TodosActionType,
  GetTodosSuccess, GetTodosFailed,
  AddTodoSuccess, AddTodoFailed,
  UpdateTodoSuccess, UpdateTodoFailed,
  DeleteTodoSuccess,
  DeleteTodoFailed
} from './todos.actions';
import { switchMap, catchError, map } from 'rxjs/operators';
import { of } from 'rxjs';
 
import { Todo } from '../../models/todo';
 
@Injectable()
export class TodosEffects {
 
  constructor(
    private actions$: Actions,
    private todosService: TodosService
  ) { }
 
  @Effect()
  getTodos$ = this.actions$.pipe(
    ofType(TodosActionType.GET_TODOS),
    switchMap(() =>
      this.todosService.getAPITodos().pipe(
        map((todos: Array<Todo>) => new GetTodosSuccess(todos)),
        catchError(error => of(new GetTodosFailed(error)))
      )
    )
  );
}

We can see here that the Effect will return GetTodosSuccess if we receive the data from the API or it will return GetTodosFailed if it fails.

To access the data, we just need to dispatch an action to the store in todo-list.component.ts as follows:

import { Component, OnInit } from '@angular/core';
import { Todo } from './../../common/models/todo';
import { Store } from '@ngrx/store';
import * as Todos from '../../common/store/todos/todos.actions';
 
@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.scss']
})
export class TodoListComponent implements OnInit {
 
  todos: Array<Todo>;
  message: string;
  bgClass: string;
  p = 1;
 
  constructor(private store: Store<any>) { }
 
  ngOnInit() {
    this.store.dispatch(new Todos.GetTodos());
    this.store.select('todos').subscribe(response => {
 
      this.todos = response.todoList;
      this.message = response.message;
      this.bgClass = response.infoClass;
 
      setTimeout(() => {
        this.message = '';
      }, 2000);
 
    }, error => {
      console.log(error);
    });
  } 
}

The template of the todo-list.component.ts component is the following:

<div class="container-fluid" *ngIf="todos">
  <div class="row">
 
    <div class="col-12">
 
      <div class="card mt-5">
        <div class="card-header">
          <h1 class="display-6 d-inline">Todo App</h1>
 
          <app-add-todo></app-add-todo>
 
        </div>
        <div class="card-body">
          <table class="table">
            <tbody>
              <tr *ngFor="let todo of todos | paginate: { itemsPerPage: 10, currentPage: p }">
                <td>
                  <code>{{todo | json}}</code>
                </td>
              </tr>
            </tbody>
          </table>
 
          <pagination-controls (pageChange)="p = $event"></pagination-controls>
        </div>
      </div>
 
    </div>
 
  </div>
</div>

The result of the GET operation will look like this:

As can be seen in figure 13, you need to select the todo list and subscribe it to your store in order to get the list of items. You also need to add new elements into the imports array from todos.module.ts. Then you need to add the store for your module (feature), reducers and effects:

imports: [
    CommonModule,
    HttpClientModule,
    NgbModule,
    FormsModule,
    ReactiveFormsModule,
    NgxPaginationModule,
    StoreModule.forRoot({}),
    StoreModule.forFeature('todos', todosReducer, { metaReducers }),
    EffectsModule.forRoot([]),
    EffectsModule.forFeature([TodosEffects])
  ],

After these steps, we can finish the application just for the GET operation from the CRUD operations.  And the diagram for the GET operation using the NgRx library will be the following: 

The other CRUD operations (create, update and delete) for this article can be found in the source code on github and after you have completed your application, it should look like this:

We can see how easy it is to add the NgRx library into an Angular project. Here are some of my conclusions before we end: