Ngrx 效果崩溃的应用程序答案

【问题标题】：Ngrx Effects crashing applicationNgrx 效果崩溃的应用程序
【发布时间】：2018-09-19 06:00:31
【问题描述】：

我正在编写一个效果类，是众多效果类之一，但在这种情况下，由于我没有针对这种特殊情况的后端，所以我正在模拟数据。问题是效果使我的应用程序崩溃并出现空白屏幕，并且在一条消息说应用程序需要很长时间才能响应之后，最好关闭它。

此外，devtools 卡在 update reducers 操作中，并且不发送任何内容。如果我从声明中删除效果类，一切都会顺利进行并且动作会被调度。

从我在代码中看到的情况来看，我并没有什么不寻常的地方，我对此有点疯狂。

有谁知道可能的问题是什么？

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>,
    ) {}
}

【问题讨论】：

标签： angular rxjs ngrx ngrx-effects

【解决方案1】：

问题是你有两个 @Effect() 装饰器

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

我猜你会因为第二个装饰器而陷入无限循环。将其更改为以下内容，它应该可以工作。

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

附带说明为什么要手动调用 dispatch，它可以重写为：

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

【讨论】：