Ngrx Effects 崩溃的应用程序

Question

我正在编写一个效果 class，其中之一，但在这种情况下，因为我没有针对这种特殊情况的后端，所以我正在模拟数据。问题是效果使我的应用程序崩溃，出现空白屏幕，并在一条消息说该应用程序响应时间过长，因此最好关闭它。

此外，devtools 卡在了更新 reducer 操作中，并且没有发送任何东西。如果我从声明中删除效果 class，一切都会顺利，并且会调度操作。

从我在代码中看到的情况来看，我没有任何异常，我在这里有点疯狂。

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

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

Answer 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())),
);

附带说明一下，您为什么要手动调用调度，它可以重写为：

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

Ngrx Effects 崩溃的应用程序

Ngrx Effects crashing application

angular

rxjs

ngrx

ngrx-effects