Enhancing NGRX actions with a new property

Is it feasible to enhance an action with additional properties using a reusable action creator function?

In NGRX, actions typically have the type property. I am interested in expanding the Actions by adding a new customType property to all actions across my project. The goal is to listen for actions in an effect that contain this customType property (such as action.customType === 'HTTP'), allowing for a centralized feature module to manage loading and error states specific to HTTP calls.

The ultimate aim is to achieve something like this in a component:

this.store.dispatch(action.loadObject());
this.isLoading$ = this.store(httpSelectors.isLoading).pipe(x => x(action.loadObject))

Answer №1

ActionsSubject could be the solution for your case. By using it, you can easily monitor all actions in your application.

constructor(
    private customActions$: ActionsSubject
) {}

ngOnInit() {
    this.customActions$.pipe(
        filter(action => action.customType === 'errorOrSomethingElse')
    ).subscribe(action => console.log(action));
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to allow a user to direct their custom domain to a specific route within a client-side Angular application?

I am developing an Angular application with a Firebase backend that allows users to create profile pages. I am looking to enable users to redirect their custom domains to their profile page within the app. I am unsure of where to begin or what resources ...

Tips on fixing the Angular error: "Argument of type '" | "" | Date' is not compatible with the parameter type 'string | number | boolean."

Currently in Angular-14, I am working on implementing a server-side search filter and pagination. Below is the code snippet that I am using: When fetching data from the web api endpoint, the startDate and endDate values are received as Date format (e.g., ...

Error: Missing provider for String value

Encountering an error in the browser after adding a string parameter to the constructor of my class: https://i.sstatic.net/Hh1wM.png The structure of my class is as follows: import { Component, OnInit } from '@angular/core'; import { MatrixCo ...

A guide on implementing conditional closing of HTML tags in Angular 2

Is it possible in Angular 2 to conditionally close an HTML tag like in PHP? For instance: <p> Some lorem <?php if(someConditionTrue){ echo "</p>"}; ?> ...

Exploring SVG Graphics, Images, and Icons with Nativescript-vue

Can images and icons in SVG format be used, and if so, how can they be implemented? I am currently utilizing NativeScript-Vue 6.0 with TypeScript. ...

Is it possible to swap images by clicking on them?

Let's say I'm working with 3 images. Image A, B and C. A is the main image initially. If I click on image B, it will become the main image and image A will take its place in the old position. The same condition applies when B is the main image a ...

Issue with Angular CDK table: The element 'td' cannot be placed inside of the element 'table'

In my Angular 7 project in Visual Studio 2017, I am attempting to implement the Angular CDK table. While following the official code sample provided here, everything functions perfectly. However, Visual Studio alerts me with warnings stating: Element &apos ...

The EC2Service's CapacityProviderStrategies is encountering an issue with the message: "The specified capacity provider named ****** could not be

After reading this resolved article, I decided to set up two AutoScalingGroup, two AsgCapacityProvider, and two ecs on ec2 service Now, my goal is to attach these CapacityProvider to each service. However, I encountered an error message stating: The spec ...

Troubleshooting issue: Unable to display data using *ngFor in Angular 4

Currently, I am developing an application that utilizes HttpClient to fetch data from a local JSON file. The JSON file contains images and descriptions, with the images also being local. While I am able to successfully log the data in a local array, I am e ...

Client Components can only receive plain objects and select built-in items from Server Components

My NextJs application has an "admin" page using Vercel Postgres. The issue I am facing is that when I fill in the inputs and click on the "Create user" button, a new user should be created. However, upon clicking the button, I encounter this error: Error ...

Is $onInit utilizing a separate scope for its execution?

HTML: <map street="{{firstunit.street}}"/> Component: @Component('CustomerService', { templateUrl: '/CustomerService/_UnitCard/MapComponent/Map.html', selector: 'map', bindings: { street: '@&a ...

What is the earliest version of npm that I can install?

There was an error encountered while trying to install a package using npm. This issue is related to permission denied when attempting to fetch a specific URL. The error code EEXIST indicates that the file already exists in the specified ...

Try implementing the Angular 9 Slice Pipe within your ngFor loop

Struggling to figure out how to properly utilize the Slice pipe from Angular within a for loop. Consider this code snippet: textArray = ['aaaaaaaaaaaaaaaaaaaaaaa', 'bbbbbbbbbbbbbbbbbbbbbbbb', 'cccccccccccccccccccc']; <n ...

I'm struggling to figure out the age calculation in my Angular 2 code. Every time I try to run it,

Can anyone assist me with calculating age from a given date in Angular? I have written the following code but I keep getting undefined in the expected field. This is Component 1 import { Component, OnInit, Input } from '@angular/core'; ...

Uh oh, there seems to be an issue with Angular 8 – it's throwing an error saying "TypeError: Cannot read

I created a website similar to Cat and Mash for selecting a cat at random, but I've encountered an error that is puzzling. Within my JSON object are URLs linking to images. My goal is to randomly display these images without repeating the same image ...

How to pass a String Array to a String literal in JavaScript

I need to pass an array of string values to a string literal in the following way Code : var arr = ['1','2556','3','4','5']; ... ... var output = ` <scr`+`ipt> window.stringArray = [`+ arr +`] & ...

Encountering issues with production deployment due to difficulties with CLI package.json scripts execution

Upon creating a basic application using the CLI tool (v6.3.0), I encountered an issue when attempting to push it to a production server. My deployment process involves using Shipit (although this may not be relevant), and part of it includes installing np ...

Ways to retain the Parent component event even after the child component has been rendered

In my project, I have a parent component containing three radio buttons named child-one, child-two, and child-three. When one of these radio buttons is clicked, the respective child component is displayed. Each child component has a radio button with optio ...

DotLottie file loading issues

While using dotlottie/react-player, webpack 4, and react 16, I encountered module parse failed errors during compilation. "@dotlottie/react-player": "^1.6.5" "webpack": "^4.44.2", "react": "16.14.0&qu ...

What are the steps to fix the configuration error caused by IIS?

I have successfully deployed my Angular application on IIS manager. After building the application with the command ng build --prod --base-href /home/, I added the data generated in the dist folder to the IIS application. Here are the files that were gen ...