Effect for side effects in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create an effect that logs a message when an action is dispatched.

Angular

readonly logEffect = createEffect(() => this.actions$.pipe(tap(() => console.log([1]))));

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

Adispatch

Bthis.actions$

C'Action dispatched!'

Dconsole.log

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a function instead of a string to console.log

Trying to dispatch an action inside tap

The tap operator is used here to perform a side effect: logging a message. The message string should be passed inside console.log.

2fill in blank

medium

Complete the code to create a non-dispatching effect that shows an alert when the 'loginSuccess' action occurs.

Angular

readonly alertEffect = createEffect(() => this.actions$.pipe(ofType('loginSuccess'), tap(() => alert([1]))), { dispatch: [2] });

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

Afalse

B'Login successful!'

Ctrue

D'Error occurred!'

Attempts:

3 left

💡 Hint

Common Mistakes

Setting dispatch to true when no action is dispatched

Passing a boolean instead of a string to alert

The alert function shows a message. The message should be a string like 'Login successful!'. The dispatch option should be set to false to indicate no new action is dispatched.

3fill in blank

hard

Fix the error in the effect that should log the action type but currently does not work.

Angular

readonly logActionType = createEffect(() => this.actions$.pipe(tap(action => console.log(action.[1]))));

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

Atype

Bname

Cpayload

Devent

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'name' or 'payload' which are not standard action properties

Trying to log the whole action object instead of a property

Actions have a type property that describes the action name. Logging action.type shows which action was dispatched.

4fill in blank

hard

Fill both blanks to create an effect that listens for 'logout' action and navigates to the login page without dispatching a new action.

Angular

readonly logoutEffect = createEffect(() => this.actions$.pipe(ofType([1]), tap(() => this.router.[2]('/login'))), { dispatch: false });

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

A'logout'

B'login'

Cnavigate

DnavigateByUrl

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'login' instead of 'logout' in ofType

Using router.navigate with an array instead of navigateByUrl with a string

The effect listens for the 'logout' action. To navigate programmatically, router.navigateByUrl is used to go to the '/login' page. The effect does not dispatch a new action.

5fill in blank

hard

Fill all three blanks to create an effect that listens for 'loadData' action, calls a service method, and logs the result without dispatching a new action.

Angular

readonly loadDataEffect = createEffect(() => this.actions$.pipe(ofType([1]), switchMap(() => this.dataService.[2]().pipe(tap(result => console.log([3]))))), { dispatch: false });

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

A'loadData'

BfetchData

Cresult

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong action name or service method

Logging an undefined variable inside tap

The effect listens for the 'loadData' action. It calls the service method fetchData which returns an observable. The result is logged inside tap using the variable result. The effect does not dispatch a new action.