How to show a success or Failure message after an action dispatched in NgRx

With the traditional attitude of developing Angular projects, you were able to do all stuff in your components via calling services, you could subscribe to them and show reactions when they got the response from the server side, moreover, this process was extremely easy and straightforward, right?

but what if you wanted to do that when you’re trying to follow the NGRX approach for developing your Angular project? you’re not calling services in your components anymore, you only dispatch actions. thereby, there would be a good question here, how we can
give feedback to our users if we dispatch an action?

It’s vital to communicate with our users effectively, and one way to achieve this is by showing them messages indicating the result of their actions. For example, after a successful login or registration, you might want to display a welcome message, or after a failed form submission, you might want to let the user know what went wrong.

In this article, I’ll explore how to overcome this challenge, I will share my solution for showing success and failure messages using Ngrx.

First of all, we need an interface, like the one below

export interface StoreActionResultModel {
  message: string;
  messageType: StoreActionsMessageTypesList;
}

Second of all, we need to define our actions like the below

export const DeleteWebHook = createAction(
  '[WebHook] Delete Web Hook',
  props<{ payload: any}>()
);

export const DeleteWebHookSuccess = createAction(
  '[WebHook] Delete Web Hook Success',
  props<{
    payload: {
      id: string;
      result: StoreActionResultModel;
    };
  }>()
);

export const DeleteWebHookFailure = createAction(
  '[WebHook] Delete Web Hook Failure',
  props<{
    payload: {
      result: StoreActionResultModel;
    };
  }>()
);

Last but not least, we need a class that defines an Effect, that it’s duty is listening to actions like the below store-actions-result-message.effects.ts

import { Actions, createEffect, ofType } from '@ngrx/effects';
import { map } from 'rxjs/operators';

import { Injectable } from '@angular/core';

import {
  CreateWebHookFailure,
  CreateWebHookSuccess,
  DeleteWebHookFailure,
  DeleteWebHookSuccess,
  UpdateWebHookFailure,
  UpdateWebHookSuccess
} from 'src/app/modules/webhook';
import { StoreActionsMessageTypesList } from './store-actions-message.model';
import { MessageService } from 'primeng/api';
import { TranslateService } from '@ngx-translate/core';

@Injectable({
  providedIn: 'root'
})
export class StoreActionsResultMessageEffect {
  private readonly _actionsForShowingMessage = [
    DeleteWebHookSuccess,
    DeleteWebHookFailure,
    UpdateWebHookSuccess,
    UpdateWebHookFailure,
    CreateWebHookSuccess,
    CreateWebHookFailure
  ];

  /**
   * Result actions are those actions that manage the result of an action, let's suppose we have an action called DeleteWebhook,
   * the possible results would be DeleteWebHookSuccess and DeleteWebHookFailure and when these actions are dispatched somewhere
   * in the project we are supposed to react to them, show a message to the user,
   * etc. with this effect we are going to listen to these types of actions and show a message to users
   */
  public listenToAllResultActions$ = createEffect(
    () => {
      return this._actions$.pipe(
        ofType(...this._actionsForShowingMessage),
        map(({ payload }) => {
          this.messageService.add({
            severity:
              payload.result.messageType == StoreActionsMessageTypesList.Success
                ? 'success'
                : 'error',
            summary: this._translateService.instant('SHARED.MESSAGES.ERROR'),
            detail: this._translateService.instant(payload.result.message)
          });
        })
      );
    },
    { dispatch: false }
  );

  constructor(
    public messageService: MessageService,
    private _actions$: Actions,
    private _translateService: TranslateService
  ) {}
}

Now, it’s time to show your messages in your project, personally I’m using the primeng as my component library so I’m gonna use toast component in the app.component.ts

<router-outlet></router-outlet>
<p-toast position="bottom-center" [preventOpenDuplicates]="true"></p-toast>