Effects for side effects in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when an effect dispatches an action?

Consider an Angular effect that listens for an action and dispatches another action. What is the result in the application?

Angular

import { createEffect, ofType, Actions } from '@ngrx/effects';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
import * as MyActions from './actions';

@Injectable()
export class MyEffects {
  effect$ = createEffect(() => this.actions$.pipe(
    ofType(MyActions.loadData),
    map(() => MyActions.loadDataSuccess({ data: [1, 2, 3] }))
  ));

  constructor(private actions$: Actions) {}
}

A The effect listens for 'loadData' action and dispatches 'loadDataSuccess' action, updating the store accordingly.

B The effect listens for 'loadData' but does not dispatch any action, so the store remains unchanged.

C The effect causes an infinite loop because it dispatches the same action it listens for.

D The effect runs only once and then stops listening for actions.

💡 Hint

Think about what happens when an effect returns a new action.

Effects listen for specific actions and can dispatch new actions to update the store or trigger other effects. Here, the effect listens for 'loadData' and dispatches 'loadDataSuccess' with data.

📝 Syntax

intermediate

Identify the syntax error in this effect definition

Which option shows the correct syntax for creating an effect that does NOT dispatch an action?

Angular

import { createEffect, ofType, Actions } from '@ngrx/effects';
import { Injectable } from '@angular/core';
import { tap } from 'rxjs/operators';
import * as MyActions from './actions';

@Injectable()
export class MyEffects {
  logEffect$ = createEffect(() => this.actions$.pipe(
    ofType(MyActions.loadData),
    tap(() => console.log('Load data action received'))
  ), { dispatch: false });

  constructor(private actions$: Actions) {}
}

A The effect is missing a return statement inside createEffect.

B The effect should use map instead of tap to dispatch an action.

C The effect must include { dispatch: false } to avoid dispatching an action.

D The effect should not use ofType operator.

💡 Hint

Think about how to create effects that only perform side effects without dispatching new actions.

When an effect does not dispatch an action, you must set { dispatch: false } in createEffect options. Using tap is correct for side effects like logging.

🔧 Debug

advanced

Why does this effect cause an infinite loop?

Examine the effect below. Why does it cause an infinite loop?

Angular

import { createEffect, ofType, Actions } from '@ngrx/effects';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
import * as MyActions from './actions';

@Injectable()
export class MyEffects {
  loopEffect$ = createEffect(() => this.actions$.pipe(
    ofType(MyActions.loadData),
    map(() => MyActions.loadData())
  ));

  constructor(private actions$: Actions) {}
}

A Because the effect uses map instead of tap, causing a syntax error.

B Because the effect listens for 'loadData' and dispatches the same 'loadData' action, triggering itself repeatedly.

C Because the effect does not unsubscribe from the actions stream.

D Because the effect is missing { dispatch: false } option.

💡 Hint

Think about what happens when an effect dispatches the same action it listens for.

The effect listens for 'loadData' and dispatches 'loadData' again, causing an endless cycle of the same action triggering the effect repeatedly.

❓ state_output

advanced

What is the state after this effect runs?

Given the reducer and effect below, what will be the state after dispatching 'loadData'?

Angular

import { createReducer, on } from '@ngrx/store';
import * as MyActions from './actions';

export interface State {
  data: number[];
  loading: boolean;
}

export const initialState: State = {
  data: [],
  loading: false
};

export const myReducer = createReducer(
  initialState,
  on(MyActions.loadData, state => ({ ...state, loading: true })),
  on(MyActions.loadDataSuccess, (state, { data }) => ({ ...state, data, loading: false }))
);

// Effect
import { createEffect, ofType, Actions } from '@ngrx/effects';
import { Injectable } from '@angular/core';
import { map, delay } from 'rxjs/operators';

@Injectable()
export class MyEffects {
  loadData$ = createEffect(() => this.actions$.pipe(
    ofType(MyActions.loadData),
    delay(1000),
    map(() => MyActions.loadDataSuccess({ data: [10, 20, 30] }))
  ));

  constructor(private actions$: Actions) {}
}

A { data: [], loading: false } immediately after dispatch

B { data: [], loading: true } immediately after dispatch

C { data: [10, 20, 30], loading: true } immediately after dispatch

D { data: [10, 20, 30], loading: false } after 1 second delay

💡 Hint

Consider the timing of the effect and reducer updates.

Initially, 'loadData' sets loading to true. After 1 second, the effect dispatches 'loadDataSuccess' which updates data and sets loading to false.

🧠 Conceptual

expert

Why use effects instead of components for side effects?

In Angular with NgRx, why is it better to handle side effects like HTTP calls inside effects rather than inside components?

A Effects centralize side effects, keep components simple, and allow better testing and state management.

B Components cannot perform HTTP calls directly, so effects are required.

C Effects run on the server only, improving performance.

D Using effects avoids the need for reducers in state management.

💡 Hint

Think about separation of concerns and testability.

Effects help keep components focused on UI, centralize side effects, and improve maintainability and testing.