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

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when this Angular effect runs?

Consider this Angular effect that listens for a login action and triggers a side effect:

readonly loginEffect = this.effect<string>((login$) => {
  return login$.pipe(
    tap(username => console.log(`User logged in: ${username}`))
  );
});

What is the main behavior of this effect?

Angular

readonly loginEffect = this.effect<string>((login$) => {
  return login$.pipe(
    tap(username => console.log(`User logged in: ${username}`))
  );
});

A It modifies the username before passing it to the next effect in the chain.

B It dispatches a new action with the username after logging it to the console.

C It logs the username to the console whenever a login action occurs, without dispatching a new action.

D It cancels the login action and prevents further processing.

💡 Hint

Think about what tap does in RxJS streams.

The tap operator is used for side effects like logging. This effect listens to the login stream and logs the username but does not dispatch any new actions.

❓ state_output

intermediate

What is the output of this effect when triggered?

Given this Angular effect that triggers a notification service on a save action:

readonly saveEffect = this.effect((save$) => {
  return save$.pipe(
    tap(() => this.notificationService.show('Saved successfully'))
  );
});

What will happen when saveEffect runs?

Angular

readonly saveEffect = this.effect((save$) => {
  return save$.pipe(
    tap(() => this.notificationService.show('Saved successfully'))
  );
});

A The notification service will display 'Saved successfully' each time the save action occurs, without dispatching new actions.

B The effect will dispatch a new action with the notification message.

C Nothing happens because the effect does not subscribe to the save$ stream.

D The effect will cause a runtime error because it returns no observable.

💡 Hint

Remember that effects automatically subscribe to the observable returned.

The effect uses tap to call the notification service for side effects. Effects automatically subscribe, so the notification shows on each save.

📝 Syntax

advanced

Which option correctly defines an effect for side effects only?

Choose the correct Angular effect syntax that performs a side effect without dispatching a new action.

A readonly logEffect = this.effect((actions$) => actions$.pipe(tap(action => console.log(action))));

B readonly logEffect = this.effect((actions$) => actions$.pipe(map(action => ({ type: 'LOG', payload: action }))));

C readonly logEffect = this.effect((actions$) => actions$.pipe(filter(action => action.type === 'LOG')));

D readonly logEffect = this.effect((actions$) => actions$.pipe(reduce((acc, curr) => acc + 1, 0)));

💡 Hint

Look for the operator that performs side effects without changing the stream.

Option A uses tap which performs side effects without emitting new actions. Other options transform or filter the stream, which may dispatch actions or change behavior.

🔧 Debug

advanced

Why does this effect not trigger the side effect?

Look at this Angular effect:

readonly effectWithoutReturn = this.effect((actions$) => {
  actions$.pipe(
    tap(() => console.log('Effect triggered'))
  );
});

Why does the console log never appear when the effect runs?

Angular

readonly effectWithoutReturn = this.effect((actions$) => {
  actions$.pipe(
    tap(() => console.log('Effect triggered'))
  );
});

A Because console.log is asynchronous and does not run inside effects.

B Because the effect function does not return the observable, so it is never subscribed to.

C Because the effect should use map instead of tap to trigger side effects.

D Because the tap operator is used incorrectly and does not cause side effects.

💡 Hint

Check if the observable is returned from the effect function.

Effects must return an observable to be subscribed to. Without returning, the pipe is created but never executed, so side effects do not run.

🧠 Conceptual

expert

What is the key difference between effects for side effects and effects that dispatch actions?

In Angular, effects can either perform side effects only or dispatch new actions. What is the main difference in how these effects are defined and behave?

A Effects for side effects automatically unsubscribe, but dispatching effects never unsubscribe.

B Effects for side effects use the map operator, while effects that dispatch actions use tap.

C Effects for side effects must be declared in the component, while dispatching effects are declared in services.

D Effects for side effects return an observable that completes without emitting actions, while effects that dispatch actions emit new actions to the store.

💡 Hint

Think about what the effect returns and what the store expects.

Side effect-only effects return observables that do not emit actions, often using tap. Effects that dispatch actions emit new actions to the store, usually using map or similar operators.

Practice

1. What is the main purpose of an Effect in Angular?

easy

A. To style components with CSS dynamically

B. To define the main UI layout of a component

C. To handle user input events directly in the template

D. To run side tasks like data loading or logging when app state changes

Solution

1. Step 1: Understand what side effects mean in Angular

   Side effects are extra tasks like fetching data or logging that happen outside the main app logic.

2. Step 2: Identify the role of Effects

   Effects run these side tasks automatically when app state changes, keeping main logic clean.

3. Final Answer:

   To run side tasks like data loading or logging when app state changes -> Option D

4. Quick Check:

   Effect = side tasks on state change [OK]

Hint: Effects run extra tasks when app data changes [OK]

Common Mistakes:

• Thinking Effects handle UI layout
• Confusing Effects with event handlers
• Believing Effects style components

2. Which of the following is the correct way to create an Effect in Angular using RxJS operators?

easy

A. createEffect(() => this.actions$.subscribe(action => console.log(action)))

B. createEffect(() => this.actions$.map(action => action.type))

C. createEffect(() => this.actions$.pipe(ofType(loadData), tap(() => console.log('Loading'))))

D. createEffect(() => this.actions$.filter(action => action.type === 'loadData'))

Solution

1. Step 1: Recall the correct RxJS operators for Effects

   Effects use pipe with operators like ofType to filter actions and tap for side effects.

2. Step 2: Check each option's syntax

   createEffect(() => this.actions$.pipe(ofType(loadData), tap(() => console.log('Loading')))) correctly uses pipe, ofType, and tap. Others misuse operators or subscribe directly, which is incorrect inside Effects.

3. Final Answer:

   createEffect(() => this.actions$.pipe(ofType(loadData), tap(() => console.log('Loading')))) -> Option C

4. Quick Check:

   Effect uses pipe + ofType + tap [OK]

Hint: Use pipe with ofType and tap inside createEffect [OK]

Common Mistakes:

• Using subscribe inside createEffect
• Using map instead of tap for side effects
• Using filter without ofType

3. Given this Effect code snippet:

loadData$ = createEffect(() => this.actions$.pipe(
  ofType('LOAD_DATA'),
  tap(() => console.log('Data loading started'))
), { dispatch: false });

What will happen when the 'LOAD_DATA' action is dispatched?

medium

A. The message 'Data loading started' is logged, and no new action is dispatched

B. The message is logged and a new action is dispatched automatically

C. Nothing happens because dispatch is false

D. An error occurs because tap cannot be used here

Solution

1. Step 1: Understand the effect's dispatch option

   Setting dispatch: false means this Effect does not send out new actions after running.

2. Step 2: Analyze the tap operator

   The tap operator runs side code like logging but does not change or dispatch actions.

3. Final Answer:

   The message 'Data loading started' is logged, and no new action is dispatched -> Option A

4. Quick Check:

   dispatch false means no new action, tap logs side effect [OK]

Hint: dispatch: false means no new action dispatched [OK]

Common Mistakes:

• Assuming tap dispatches actions
• Thinking dispatch: false disables effect
• Confusing tap with map or switchMap

4. Identify the error in this Effect code:

saveData$ = createEffect(() => this.actions$.pipe(
  ofType('SAVE_DATA'),
  map(() => this.api.save()),
  tap(() => console.log('Save triggered'))
));

medium

A. Using map without returning an action causes an error

B. tap cannot be used after map

C. ofType should be replaced with filter

D. createEffect must not use arrow functions

Solution

1. Step 1: Check the map operator usage

   map must return a new action object for dispatching, but this.api.save() likely returns a Promise or void, not an action.

2. Step 2: Understand effect dispatch requirements

   Effects expect actions to be returned for dispatch unless dispatch: false is set, which is missing here.

3. Final Answer:

   Using map without returning an action causes an error -> Option A

4. Quick Check:

   map must return action for dispatch [OK]

Hint: map must return an action unless dispatch: false [OK]

Common Mistakes:

• Ignoring missing action return in map
• Thinking tap cannot follow map
• Confusing ofType with filter

5. You want to create an Effect that listens for a 'LOGIN' action, calls an async login API, and then dispatches either 'LOGIN_SUCCESS' or 'LOGIN_FAILURE' based on the result. Which code snippet correctly implements this?

hard

A. login$ = createEffect(() => this.actions$.pipe(
ofType('LOGIN'),
tap(() => this.authService.login()),
map(() => ({ type: 'LOGIN_SUCCESS' }))
));

B. login$ = createEffect(() => this.actions$.pipe(
ofType('LOGIN'),
switchMap(action => this.authService.login(action.credentials).pipe(
map(user => ({ type: 'LOGIN_SUCCESS', user })),
catchError(() => of({ type: 'LOGIN_FAILURE' }))
))
));

C. login$ = createEffect(() => this.actions$.pipe(
filter(action => action.type === 'LOGIN'),
map(() => this.authService.login()),
map(user => ({ type: 'LOGIN_SUCCESS', user }))
));

D. login$ = createEffect(() => this.actions$.pipe(
ofType('LOGIN'),
map(action => this.authService.login(action.credentials)),
map(user => ({ type: 'LOGIN_SUCCESS', user }))
));

Solution

1. Step 1: Identify async handling with switchMap

   Using switchMap allows calling the async login API and switching to its result stream.

2. Step 2: Handle success and error properly

   Inside switchMap, map creates a success action, and catchError returns a failure action wrapped in of to keep the stream alive.

3. Final Answer:

   login$ = createEffect(() => this.actions$.pipe( ofType('LOGIN'), switchMap(action => this.authService.login(action.credentials).pipe( map(user => ({ type: 'LOGIN_SUCCESS', user })), catchError(() => of({ type: 'LOGIN_FAILURE' })) )) )); -> Option B

4. Quick Check:

   Use switchMap + map + catchError for async effects [OK]

Hint: Use switchMap with map and catchError for async API calls [OK]

Common Mistakes:

• Using tap instead of switchMap for async calls
• Not handling errors with catchError
• Returning promises instead of observables