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

Recall & Review

beginner

What is the main purpose of Effects in Angular?

Effects handle side effects like API calls or navigation outside of components, keeping components clean and focused on UI.

beginner

How do you create an Effect in Angular?

You create an Effect by defining an Observable using createEffect() inside a service, which listens to actions and performs side effects.

intermediate

What operator is commonly used inside Effects to handle asynchronous tasks like HTTP requests?

The switchMap operator is commonly used to switch to a new Observable for async tasks and cancel previous ones if needed.

intermediate

Why should Effects not directly modify the state?

Effects should only perform side effects and dispatch new actions; reducers handle state changes to keep logic clear and predictable.

intermediate

How do you handle errors inside an Effect?

Use the catchError operator inside the Effect to catch errors and dispatch an error action or handle it gracefully.

What does an Effect in Angular primarily listen to?

A Actions dispatched in the store

B Component lifecycle hooks

C User input events

D Direct DOM changes

Effects listen to actions dispatched in the store to perform side effects.

Which function is used to define an Effect in Angular?

A createEffect()

B useEffect()

C defineEffect()

D makeEffect()

createEffect() is the Angular function to define Effects.

Which RxJS operator is best for handling HTTP requests inside Effects?

A reduce

B map

C filter

D switchMap

switchMap is used to switch to a new Observable for async tasks like HTTP requests.

What should Effects NOT do directly?

A Dispatch new actions

B Perform side effects

C Modify the state

D Listen to actions

Effects should not modify the state directly; reducers handle state changes.

How do you handle errors inside an Effect?

A Ignoring errors

B Using catchError operator

C Using try-catch block

D Using map operator

catchError operator is used inside Effects to handle errors gracefully.

Explain how Effects help manage side effects in Angular applications.

Think about how Effects separate side effect logic from UI logic.

Describe the steps to create an Effect that handles an API call and error handling.

Focus on the Observable flow inside the Effect.