Which approach correctly implements this using Angular Effects?
hard📝 Application Q15 of 15
Angular - State Management
You want to create an effect that listens for login actions, calls an API to authenticate, and then dispatches either loginSuccess or loginFailure. Additionally, you want to log every login attempt regardless of success or failure. Which approach correctly implements this using Angular Effects?
AUse two separate effects: one for API call with dispatch, another for logging with dispatch: false
BUse one effect with <code>switchMap</code> for API call and <code>tap</code> for logging inside the same pipe
CUse one effect with <code>map</code> for API call and <code>catchError</code> for logging
DUse one effect with <code>filter</code> to block logging and API call
Step-by-Step Solution
Solution:
Step 1: Separate concerns for side effects
Logging is a side effect that does not dispatch actions, so it should be in a separate effect with dispatch: false.
Step 2: API call effect dispatches success or failure
The main effect handles the API call and dispatches loginSuccess or loginFailure accordingly.
Step 3: Final design
Two effects keep code clean and responsibilities clear: one for API calls with dispatch, one for logging without dispatch.
Final Answer:
Use two separate effects: one for API call with dispatch, another for logging with dispatch: false -> Option A
Quick Check:
Separate effects for dispatching and logging [OK]
Quick Trick:Use separate effects for dispatching and non-dispatching tasks [OK]
Common Mistakes:
Combining logging and dispatching in one effect incorrectly
Using map instead of switchMap for API calls
Forgetting dispatch: false for logging effect
Master "State Management" in Angular
9 interactive learning modes - each teaches the same concept differently
