Infinite loop with ngrx/effects
<p>I'm trying to understand ngrx/effects. I have built a simple function that increments number by 1 with each click. But it's going in an infinite loop when clicked, not sure whats going on. I'm sure im making some stupid mistake.</p>

<p>monitor.effects.ts</p>

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

    constructor(private actions$: Actions, private http:Http ) {};
}
</code></pre>

<p>monitor.component.ts</p>

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

  increment(value: number) {
    this.store.dispatch(new monitorActions.IncrementAction(value));
  }
</code></pre>

<p>monitor.reducer.ts</p>

<pre><code>export const monitorReducer: ActionReducer&lt;IMonitor.State&gt; = (state = initialState, action: Actions) =&gt; {
  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 });
  }
}
</code></pre>