Advanced Redux — Side Effects, Async Tasks & ThunksEntry 1 of 9
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.
Notes
- Reducers must be pure, side-effect free, and synchronous: old state + action in, new state out. Same input always gives the same output.
- So HTTP calls, timers, and storage writes can never go inside a reducer.
- They go in one of two places:
- Inside components, usually in
useEffect. The reducer stays pure; the component runs the side effect and dispatches the result. - Inside action creators (thunks). The async logic lives with the Redux code, and components just dispatch.
- Inside components, usually in
| Task type | Example | Where it goes |
|---|---|---|
| Sync, pure | Add item to cart, toggle UI | Reducer |
| Async | API call, timeout, file read | Component useEffect or thunk |
| Any external effect | fetch, log, DOM write, storage | Never in a reducer |
What / Why / When
- What
A rule for separating pure state logic from external work.
- Why
Pure reducers are predictable, testable, and replayable in DevTools. A reducer that fetches breaks all three.
- When
Every time logic touches anything outside the store.
Angular
NgRx applies the same rule: reducers stay pure, and side effects go in Effects, which call services. Components dispatch actions and never call HttpClient for store data directly.
Quick reference
| Concern | Redux Toolkit | NgRx |
|---|---|---|
| Pure state change | Reducer | Reducer |
| Side effect location | Component useEffect / thunk | Effect + service |
| HTTP code lives in | Thunk or api.ts | Service class |