CODEWITHSUNDEEP
angularrxjsngrxngrx-effects
joseFrancisco
joseFrancisco

Reputation: 139

Ngrx Effects crashing application

I'm writing an effects class, one of many, but in this case since I don't have backend for this particular case, I'm mocking data. The thing is that the effect crashes my application getting a blank screen and after a message saying that the app is taking to long to respond so it's better to close it.

Also the devtools is stuck at update reducers action, and doesn't dispatch anything. If I remove the effects class from declaration, everything goes well and actions are dispatched.

From what I see in the code I don't have nothing out of ordinary, I'm getting a little bit crazy with this here.

Do anyone knows what is the possible issue?

import { Injectable } from '@angular/core';
import { Store } from '@ngrx/store';
import * as loadingActions from '../../../../main/actions/loading.actions';
import * as fromMain from '../../../../main/main.reducers.index';
import { Effect, ofType, Actions } from '@ngrx/effects';
import { ConfigureActions, ConfigurationActionTypes, GetProductDetailsSuccess } from '../../actions/configure.actions';
import { tap, mergeMap } from 'rxjs/operators';
import { ProductModelUIFactory } from '../../models/configure.model';

@Injectable()
export class ConfigureProductEffects {
    @Effect() public getProductDetails$ = this.actions$
     .pipe(
         ofType<ConfigureActions>(ConfigurationActionTypes.GetProductDetails),
         tap(() => this.mainStore$.dispatch(new loadingActions.ShowLoading())),
         mergeMap( (action) => {
            const productNumber = action.payload;
            const productDetails = ProductModelUIFactory.build();
            const newaction = new GetProductDetailsSuccess(productDetails);
            return [
                newaction
            ];
        })
    );

    @Effect({ dispatch: false })
    @Effect() public getProductDetailsSuccess$ = this.actions$
    .pipe(
        ofType<ConfigureActions>(ConfigurationActionTypes.GetProductDetailsSuccess),
        tap(() => this.mainStore$.dispatch(new loadingActions.HideLoading())),
    );

    constructor(
        private actions$: Actions,
        private mainStore$: Store<fromMain.MainState>,
    ) {}
}

Upvotes: 1

Views: 1077

Answers (1)

timdeschryver
timdeschryver

Reputation: 15487

The problem is that you have two @Effect() decorators in

@Effect({ dispatch: false })
@Effect() public getProductDetailsSuccess$ = this.actions$
.pipe(
    ofType<ConfigureActions>(ConfigurationActionTypes.GetProductDetailsSuccess),
    tap(() => this.mainStore$.dispatch(new loadingActions.HideLoading())),
);

My guess would be that you're stuck in an infinite loop because of the second decorator. Change this to the following and it should work.

@Effect({ dispatch: false })
public getProductDetailsSuccess$ = this.actions$
.pipe(
    ofType<ConfigureActions>(ConfigurationActionTypes.GetProductDetailsSuccess),
    tap(() => this.mainStore$.dispatch(new loadingActions.HideLoading())),
);

On a side note why are you calling dispatch manually, it could be rewritten as:

@Effect()
public getProductDetailsSuccess$ = this.actions$
.pipe(
    ofType<ConfigureActions>(ConfigurationActionTypes.GetProductDetailsSuccess),
    map(() => new loadingActions.HideLoading()),
);

Upvotes: 3

Related Questions