How Redux createStore Works, Line by Line
Redux’s entire state engine is one function that returns a closure. Walk the real createStore.ts source top to bottom — dispatch, subscribe, the isDispatching guard, and the INIT that boots your state tree.
Code walk · Web. The source ↗
A free, interactive, animated visual explainer of How Redux createStore Works, Line by Line — built to be understood, not skimmed.
Questions
- How does Redux store state internally?
- In a closure. createStore declares currentState, currentReducer, and two listener maps as local variables, then returns functions (dispatch, getState, subscribe) that close over them. Nothing outside the function can touch state except by dispatching an action.
- What does the isDispatching flag do in Redux?
- It guards against reentrancy. While a reducer runs, isDispatching is true, so getState, subscribe, and a nested dispatch all throw. This enforces that a reducer is a pure function of the state it was handed, not something that reads or mutates the live store mid-run.
- Why does Redux keep two listener lists?
- Copy-on-write. nextListeners is a mutable draft; subscribe and unsubscribe edit the draft, and dispatch snapshots it into currentListeners before it starts notifying. So subscribing or unsubscribing from inside a listener never disturbs the notification loop already in progress.
- What is the Redux INIT action?
- When the store is created it dispatches { type: ActionTypes.INIT }. No reducer handles that type, so every reducer falls through to its default branch and returns its initial state — that single dispatch populates the whole state tree before your app runs.
- Is createStore deprecated?
- The Redux team recommends configureStore from Redux Toolkit, but createStore is not being removed. The core logic walked here is exactly what configureStore builds on top of, which makes this file the clearest way to learn how Redux actually works.