Advanced Redux — Side Effects, Async Tasks & ThunksEntry 9 of 9
Summary
| Concept | Redux Toolkit | NgRx |
|---|---|---|
| Reducer rule | Pure, sync, no side effects | Pure, sync, no side effects |
| Side effect location | Component useEffect or thunk | Effect + service |
| Thunk | Function dispatched instead of an action; gets dispatch, getState | — (Effects fill this role) |
| Middleware | Thunk, built into configureStore | provideEffects() |
| Standard async helper | createAsyncThunk + extraReducers | createActionGroup + createEffect + on() |
| Read state in async code | getState() | concatLatestFrom() |
| Avoid saving initial data | changed flag | Trigger on user actions only |
| Global status messages | ui slice + showNotification | ui feature + showNotification |
| HTTP code | Thunk or api.ts | Service |
Reducers stay pure in both ecosystems, so async work moves elsewhere: thunks in Redux Toolkit, Effects in NgRx. createAsyncThunk and NgRx Effects solve the same problem. RTK is pulled by the component dispatching a function; NgRx is pushed by actions flowing through an RxJS stream, with HTTP always isolated in a service.