Redux Examples
The same ToDo app, written twice: once the old way, once with Redux Toolkit.
The canonical ToDo app
Add a todo, toggle it, fetch a list. Three actions, and already there are
ACTION_TYPE constants, hand-written action creators, a switch reducer,
spread operators nested three levels deep and a connect() wrapper with
mapStateToProps and mapDispatchToProps.
Show me the boilerplate →
Modern ReduxThe same ToDo app
One createSlice: action types, action creators and reducer in a single
object, with Immer letting those reducers mutate state directly and
still hand back a new immutable tree.
Show me the slice →
Mythical Zoos & Enchanted Wilds
Two fantasy worlds built on the same fake backend, each one showing a different way to get server data into Redux — so you can compare them side by side.
🏰 Mythical Zoos
RTK Query: createApi generates the hooks, the cache, the loading flags
and the invalidation. No reducers, no thunks, no fetch.
🌿 Enchanted Wilds
The same screens with createAsyncThunk and createSelector,
for when you need to own the request and derive state yourself.
Visit the zoos →
ReduxJS/Toolkit, written out
Every example on this page is explained, step by step, on the itenium blog.
- ReduxJS/Toolkit — why it exists and what it replaces
- Immer — mutate state, get an immutable tree
- createSlice & configureStore — the whole store, minus the boilerplate
- createAsyncThunk — the Enchanted Wilds, explained
- TypeScript — typing the store, thunks and hooks
- createSelector — memoized, derived state with Reselect
- createApi — under construction