Advanced Redux — Side Effects, Async Tasks & Thunks

React ↔ Angular reference. React examples use React 19 + TypeScript with Redux Toolkit. Angular examples use modern Angular (standalone components, signals, inject(), @if/@for) with NgRx. Builds on the Redux & Redux Toolkit chapter.

Test yourself

14 questions

1
Side Effects and Where They Belong
A side effect is any operation that affects or depends on the outside world: HTTP requests, localStorage, timers, logging, navigation.
2
Side Effects in Components with useEffect
The component selects state from the store and runs a side effect in useEffect whenever that state changes.
3
A UI Slice for Notifications
A separate slice that stores UI state, such as a notification banner showing the status of an HTTP request.
4
What Is a Thunk?
A thunk is a function that delays an action until later. In Redux, it's an action creator that does not return the action itself, but another function that eventually dispatches the action.
5
Writing Custom Thunk Action Creators
Hand-written thunks that run HTTP requests, dispatch notifications, and update slices, keeping components lean.
6
createAsyncThunk: The Modern Way
RTK's helper that wraps an async function and automatically dispatches pending, fulfilled, and rejected actions, handled in the slice's extraReducers.
7
Scalable Feature Folder Structure
Organizing Redux code by feature, with each feature folder holding its slice, components, and API calls.
8
Choosing an Async Approach
Redux offers several places for async logic; the right one depends on how complex and reused the logic is.
9
Summary