Effects for side effects in Angular - Step-by-Step Execution

Concept Flow - Effects for side effects

Action Dispatched

↓

Effect Listens

↓

Perform Side Effect

↓

Dispatch New Action

↓

Store Updates State

↓

UI Reacts to State Change

When an action happens, an effect listens and runs a side effect like fetching data, then sends a new action to update the state and UI.

Execution Sample

Angular

readonly loadData$ = createEffect(() =>
  this.actions$.pipe(
    ofType(loadData),
    switchMap(() => this.api.getData()),
    map(data => loadDataSuccess({ data }))
  )
);

This effect listens for 'loadData' action, fetches data from API, then dispatches 'loadDataSuccess' with the data.

Execution Table

Step	Action Dispatched	Effect Triggered	Side Effect	New Action Dispatched	Store Update
1	loadData	Yes	API call started	No	No
2	API call resolves	No	Data received	loadDataSuccess({ data })	No
3	loadDataSuccess({ data })	No	No side effect	No	State updated with data
4	UI updates	No	No	No	UI shows new data
5	No more actions	No	No	No	Idle
Exit	No new actions	No	No	No	End of effect cycle

💡 No new actions dispatched, effect cycle ends.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
actions$	idle	loadData dispatched	API response received	loadDataSuccess dispatched	idle
state.data	empty	empty	empty	filled with API data	filled with API data
UI	empty view	loading indicator	loading indicator	data displayed	data displayed

Key Moments - 3 Insights

Why does the effect dispatch a new action instead of directly updating the state?

Effects only handle side effects and produce new actions; the store updates state when it receives these actions, as shown in steps 2 and 3 of the execution_table.

What happens if the API call fails inside the effect?

You would handle errors by dispatching a failure action inside the effect, similar to how loadDataSuccess is dispatched, but with error info. This is not shown here but follows the same pattern.

Does the effect run on every action?

No, it only runs when the specific action it listens for is dispatched, like loadData in step 1.

Visual Quiz - 3 Questions

Look at the execution_table, what action triggers the effect to start the API call?

A loadDataSuccess

B loadData

C API response received

D UI updates

💡 Hint

Check Step 1 in the execution_table where the effect triggers on an action.

At which step does the store update its state with the new data?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look for 'State updated with data' in the Store Update column.

If the effect did not dispatch a new action after the API call, what would happen?

A The store would update automatically

B The UI would show loading forever

C The state would not update with new data

D The effect would run twice

💡 Hint

Refer to how the store updates only after receiving a new action in the execution_table.

Concept Snapshot

Effects listen for specific actions.
They run side effects like API calls.
After side effects, they dispatch new actions.
Store updates state on these new actions.
UI reacts to state changes.
This keeps side effects separate from state logic.

Full Transcript

In Angular, effects listen for actions dispatched to the store. When an action like 'loadData' is dispatched, the effect triggers and performs a side effect such as calling an API. Once the API responds, the effect dispatches a new action, for example 'loadDataSuccess', carrying the data. The store listens for this new action and updates its state accordingly. The UI then updates to reflect the new state. This flow separates side effects from state management, keeping code clean and predictable.