Why do inherited generic classes in Ngrx not automatically subscribe to Ngrx-Effects?

In my project, I encounter a scenario where I have multiple effect classes that extend a generic class. However, effects inherited from the generic class are not automatically subscribed to. Instead, manual subscription is required in the constructor of the generic class:

    @Injectable()
    export class GenericEffects<T extends Action, K> {
     action: T;
     constructor(
       TCreator: { new (): T },
      protected actions: Actions,
      protected store: Store<K>,
      protected route: string

      ) {
       this.action = new TCreator();

       --> this.effect1.subscribe(); <---
    }

    @Effect({ dispatch: false })
    effect1 = this.actions.ofType(genericActions.EFFECT_1).pipe(
      withLatestFrom(this.store.select<RouterReducerState>('route')),
      map(([action, routerState]) => routerState.state.url),
      map(url => {
        if (url.indexOf(this.route) !== -1 && url.length === 
          this.route.length + 1) {
        this.store.dispatch(this.action);
      }
    })
  );
}

FeatureEffectsModule:

    @Injectable()
    export class FeatureEffects extends GenericEffects<
      featureActions.WhatEverAction,
      fromFeature.State
     > {
      constructor(
        actions: Actions,
        store: Store<fromFeature.State>,
        private service: FeatureService
      ) {
        super(
          featureActions.WhatEverAction,
          actions,
          store,
          'foo'
        );
      }
    }

What could be the reason behind this manual process or what am I missing?

Answer №1

After noticing that the effects are triggered in the non-generic version, I decided against subscribing in the base class constructor of the generic version. Instead, I discovered that re-declaring the effect in the derived class solves the issue. Although it involves some code repetition, I have come to accept it. In a similar scenario, I simply added one line:

@Injectable()
export class CustomEffects extends EnhancedEffects<
  customActions.SomeAction,
  fromCustom.State
 > {
  constructor(
    actions: Actions,
    store: Store<fromCustom.State>,
    private service: CustomService
  ) {
    super(
      customActions.SomeAction,
      actions,
      store,
      'bar'
    );
  }

  @Effect()  additionalEffect;      //   <---   this is how it looks

}

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

Identifying a specific value of a variable in Typescript

I am currently developing an idle timeout feature for my application. Once the system detects inactivity, a modal window is triggered. Within this modal window, a timer is presented to the user. My goal is to have a way to determine when this timer reaches ...

Using Angular 4: Redirecting Menu to Component with Electron

I am currently working on my first project using Angular 4 and Electron to develop a desktop application. One of the challenges I'm facing is figuring out how to redirect to a specific component when a submenu item is clicked after overriding the ele ...

ADAL fails to send CORS header

I've developed an Angular 5 application that utilizes the adal-angular5 package for user authentication via ADFS 2016. The Angular app interacts with an API that fetches and updates data in a connected database. The Angular app is hosted at https://lo ...

Prevent click events on disabled tabs in PrimeNG tabMenu

I am encountering an issue with PrimeNG's p-tabMenu when it comes to disabled menu items. For example, suppose I have a tabMenu with 4 sub tabs labeled AAA, BBB, CCC, and DDD. This is how the menuItems are set up in the TypeScript component: //.... ...

Troubleshooting a Possible TypeScript Compilation Issue Causing Failure in a Basic GET Request for Angular 2

Currently, I am dealing with three issues that are interrelated. My main focus is on understanding Services and Components better, so I decided to start with a basic GET request. In my steam.service.ts: import { Injectable } from '@angular/core& ...

Tips for utilizing a formatter with a Doughnut chart in Angular using Chart.js

When using Chart.js with AngularJS, I tried to display numbers or percentages in a doughnut chart using a formatter. However, it did not work as expected. Here is how I implemented it in my HTML: <canvas baseChart class="chart" [data]="do ...

Navigating JSON data in Typescript/JavaScript

I'm currently looping through JSON data using nested forEach loops in TypeScript. However, I'm curious if there are simpler and more efficient approaches available in typescript or RXJS, especially since I am also iterating over an Observable in ...

Input tag paired with a date picker

Instead of using the <label>{{list.createdat | date: 'dd.MM.yyyy'}}</label> tag, I want to change it to an input tag to create a simple datepicker: <input type="date"/> The issue is that the data in the <label> tag is pa ...

Angular Material datepicker designed for multiple input fields

In my form, I have multiple text box inputs where users enter dates. These fields are populated with values from a single instance of the Angular Material datepicker via TypeScript code. (dateChange)="onDateChange($event) When a user selects a date, such ...

Troubleshooting: Issue with connecting Node.Js to MongoDB Compass

Having trouble connecting to MongoDB Compass using Typescript, Node.js, and Mongoose. Below is my mongo connection code: const url ='mongodb://localhost:27017/BlogApp'; mongoose.connect(url) .then(() => {console.log("Connected to MongoDB")}) ...

The Angular 2 component is experiencing difficulty in fetching data from the service

My current predicament is fairly straightforward - I am attempting to fetch data from an Angular 2 service, but the target array always ends up empty. Despite seeing that the API call returns data with a status of 200 and no errors are displayed in the con ...

Issue encountered when attempting to assign a value to an array property in Angular

Having trouble setting an array property in angular 6 using the following code: this.addupdate.roleids=this.selectedRole; An error is being thrown: ERROR TypeError: Cannot set property 'roleids' of undefined at AccessLevelComponent.pus ...

Creating a local HTML file using node.js: A step-by-step guide

Recently, I've delved into developing games using Typescript. However, I've encountered a bit of an issue when attempting to build my game - it requires running on a server. This limitation prevents me from creating an offline game with Node.js a ...

Get detailed coverage reports using Istanbul JS, Vue JS, Vue CLI, Cypress end-to-end tests, and Typescript, focusing on specific files for analysis

I have a VueJS app written in Typescript that I am testing with Cypress e2e tests. I wanted to set up coverage reports using Istanbul JS to track how much of my code is covered by the tests. The integration process seemed straightforward based on the docum ...

Unable to retrieve the value from the nested formGroup

I am currently in the process of setting up nested formGroup fields using HTML code. <form [formGroup]="userProfileForm" (ngSubmit)="bookUser()" class="form"> <!-- userName --> <div class="form-group"> <label for="user ...

Unexpected Display Issue with Angular Select Option

My goal is to implement the Select-Option Input as depicted in the first image link here: https://i.sstatic.net/SVT8R.png However, my current output looks different and I suspect that there may be a conflict between two CSS libraries. It's worth noti ...

Using onClick to manipulate state in React

I am in the process of dynamically setting the className for my divs, and I've noticed that it only updates when I click on my div for the second time: const [ clicked, setClicked ] = useState<string>(''); const returnContent = ( &l ...

What is the best way to set up role redirection following a successful login within my MEAN stack application?

I have successfully developed a MEAN stack application with a functioning backend and frontend. However, I am looking to enhance it further by implementing role-based redirection after login. There are 5 roles in the system: admin, teacher, nurse, sportsma ...

Modifying elements in an array using iteration in typescript

I'm trying to figure out how to iterate over an array in TypeScript and modify the iterator if necessary. The TypeScript logic I have so far looks like this: for (let list_item of list) { if (list_item matches condition) { modify(list_ite ...

Why are my class data types not aligning with JSON objects?

In my Node.js project using TypeScript, I have defined the Tariff and Tariffs classes. I also generated fake data in JSON format that should align with these Classes. However, I encountered an error in the resolve() method stating: Argument of type &apo ...