ngrx/effects 无限循环

Question

我正在努力理解 ngrx/effects。我构建了一个简单的函数，每次单击都会将数字递增 1。但是单击时它会进入无限循环，不确定发生了什么。我确定我犯了一些愚蠢的错误。

monitor.effects.ts

@Injectable()
export class MonitorEffects {
    @Effect()
    compute$: Observable<Action> = this.actions$
        .ofType(monitor.ActionTypes.INCREMENT)
        .map((action: monitor.IncrementAction) => action.payload)
        .switchMap(payload => {
            return this.http.get('https://jsonplaceholder.typicode.com/users')
             .map(data => new monitor.IncrementAction(payload+1))
             .catch(err => of(new monitor.InitialAction(0)))
        });

    constructor(private actions$: Actions, private http:Http ) {};
}

monitor.component.ts

ngOnInit() {
    this.storeSubsciber = this
      .store
      .select('monitor')
      .subscribe((data: IMonitor.State) => {
        this.value = data.value;
        this.errorMsg = data.error;
        this.currentState = data.currentState;
      });
  }

  increment(value: number) {
    this.store.dispatch(new monitorActions.IncrementAction(value));
  }

monitor.reducer.ts

export const monitorReducer: ActionReducer<IMonitor.State> = (state = initialState, action: Actions) => {
  switch (action.type) {
    case ActionTypes.INCREMENT:
      return Object.assign({}, { value: action.payload, currentState: ActionTypes.INCREMENT, error: null });
...
...
...

    default:
      return Object.assign({}, { value: 0, currentState: ActionTypes.INITIAL, error: null });
  }
}

Answer 1

Effect 允许您观察给定的动作类型并在每次调度时对该动作做出反应。

因此，如果您观察某个效果中的动作 X 并从该效果中分派另一个动作 X，您将陷入无限循环。

在你的情况下：你的动作是 .ofType(monitor.ActionTypes.INCREMENT) 类型，然后根据你的效果发送一个动作 monitor.ActionTypes.INCREMENT（从这部分我假设：monitor.IncrementAction(payload+1)），然后是效果一次又一次地触发，...

Answer 2

我遇到了同样的问题，答案是我的效果并没有 return 与当前效果所针对的动作完全不同。

为了我的影响，我只做了一个.do()，并没有将它切换到新的动作。那是我的问题。因为我不需要触发新动作，所以我制作了一个获得 returns 的 NoopAction。这意味着任何人都不应该在减速器中使用 NoopAction。

Answer 3

我遇到了这个问题，这里的答案没有帮助。对我来说，我有一个“成功”的动作，有一个 tap() 来导航。我的浏览器会锁定，我不明白为什么，直到我在我的点击功能中输入日志并注意到它被无限点击。

我的问题是，当 tap 返回相同的可观察对象时，效果正在调用自身。我错过了什么，我的解决方案...是将 dispatch: false 放在我的效果上以防止它自行调度。

@Effect({dispatch: false})

Answer 4

我们已经从 Maxime

那里得到了正确答案

我来这里是为了同样的问题，但没有任何效果，在我的情况下是 copy-paste 问题

export const LoadCustomers = createAction(
    '[Customers] Load Customers' 
)
export const LoadCustomers_Success = createAction(
    '[Customers] Load Customers',
    props<{customers: Array<ICustomer>}>()
)
export const LoadCustomers_Failure = createAction(
    '[Customers] Load Customers',
    props<{error: string}>(),
)

我的错误是类型'[Customers] Load Customers'，我更改了动作名称但忘记更改类型。

ngrx/effects 无限循环

Infinite loop with ngrx/effects

side-effects

redux

ngrx

angular