Effect for side effects in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an Effect in Angular's NgRx used for?

An Effect listens for specific actions and performs side effects like API calls or navigation without changing the state directly.

beginner

Why should side effects be handled in Effects instead of reducers?

Reducers must be pure functions without side effects. Effects handle asynchronous tasks and side effects separately to keep reducers pure and predictable.

intermediate

Which RxJS operator is commonly used inside Effects to handle actions and trigger side effects?

The 'switchMap' operator is often used to switch to a new observable for side effects like HTTP requests when an action is dispatched.

intermediate

How do you dispatch a new action after a side effect completes in an Effect?

You return a new action observable from the Effect, often using 'map' or 'concatMap' to transform the result into a success or failure action.

beginner

What decorator is used to mark a class as an Effect provider in Angular?

The '@Injectable()' decorator is used to mark the Effect class so Angular can inject dependencies and register the Effect.

What is the main purpose of an Effect in Angular NgRx?

A To style the application

B To update the store state directly

C To handle side effects like API calls

D To define UI components

Effects listen for actions and perform side effects such as API calls without directly modifying the state.

Which RxJS operator is commonly used inside Effects to handle asynchronous operations?

A switchMap

B filter

C reduce

D scan

switchMap switches to a new observable for each action, useful for handling async tasks like HTTP requests.

Where should side effects NOT be handled in NgRx?

A Effects

B Components

C Services

D Reducers

Reducers must be pure and free of side effects; side effects belong in Effects or services.

How do you trigger a new action after a side effect completes in an Effect?

A Use a template event binding

B Return a new action observable

C Call dispatch inside the reducer

D Modify the state directly

Effects return new action observables to dispatch actions after side effects finish.

Which decorator is required to make an Effect class injectable in Angular?

A @Injectable()

B @Component()

C @NgModule()

D @Effect()

@Injectable() allows Angular to inject dependencies into the Effect class.

Explain how Effects help manage side effects in Angular NgRx applications.

Think about how asynchronous tasks are separated from state updates.

Describe the role of RxJS operators like switchMap in writing Effects.

Consider how RxJS helps manage async flows in Effects.