Effects for side effects in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the EffectsModule in Angular.

Angular

import { [1] } from '@ngrx/effects';

Drag options to blanks, or click blank then click option'

AEffectsModules

BEffectModule

CEffectModules

DEffectsModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using singular 'EffectModule' instead of plural 'EffectsModule'.

Adding extra 's' or misspelling the module name.

The correct import is EffectsModule from '@ngrx/effects'.

2fill in blank

medium

Complete the code to create an effect that listens for a 'loadItems' action.

Angular

loadItems$ = createEffect(() => this.actions$.pipe(ofType([1]), /* side effect here */));

Drag options to blanks, or click blank then click option'

AloadItemsAction

BloadItems

Cload_items

DLoadItems

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect casing or underscores in action names.

Adding 'Action' suffix when not defined.

The ofType operator listens for the exact action name, which is loadItems.

3fill in blank

hard

Fix the error in the effect to correctly dispatch a new action after a side effect.

Angular

loadItems$ = createEffect(() => this.actions$.pipe(ofType(loadItems), switchMap(() => this.api.getItems().pipe(map(items => [1])))));

Drag options to blanks, or click blank then click option'

AloadItemsSuccess({ items })

BloadItemsSuccess = items

CloadItemsSuccess(items: items)

DloadItemsSuccess(items)

Attempts:

3 left

💡 Hint

Common Mistakes

Passing payload directly without object.

Using assignment instead of function call.

The correct way to dispatch an action with payload is calling the action creator with an object: loadItemsSuccess({ items }).

4fill in blank

hard

Fill both blanks to create an effect that handles errors by dispatching a failure action.

Angular

loadItems$ = createEffect(() => this.actions$.pipe(ofType(loadItems), switchMap(() => this.api.getItems().pipe(map(items => loadItemsSuccess({ items })), [1](error => of([2]))))));

Drag options to blanks, or click blank then click option'

AcatchError

BloadItemsFailure({ error })

CloadItemsFail({ error })

DcatchErrors

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect operator name like 'catchErrors'.

Using wrong failure action name.

Use catchError to catch errors and dispatch loadItemsFailure with the error.

5fill in blank

hard

Complete the code to define an effect that does not dispatch any action but performs a side effect.

Angular

logAction$ = createEffect(() => this.actions$.pipe(ofType(logEvent), tap(() => console.log('Event logged'))), { {{BLANK_1}: false,} });

Drag options to blanks, or click blank then click option'

Adispatch

B,

C}

D;

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the dispatch option or setting it to true.

Syntax errors with missing commas or braces.

Set dispatch: false in the effect options object to indicate no action is dispatched.