Redux is a predictable state container for JavaScript applications, most commonly used with React but framework-agnostic. It centralizes application state into a single immutable store, enforces unidirectional data flow, and enables powerful debugging capabilities like time-travel and hot reloading. Redux follows three core principles: single source of truth, state is read-only, and changes are made with pure functions (reducers). Redux Toolkit (RTK) is the official, opinionated way to write Redux — eliminating boilerplate with createSlice, configureStore, createAsyncThunk, and RTK Query for data fetching. Redux 5.0 and RTK 2.0 (released late 2023) modernized the entire ecosystem with improved ESM packaging, TypeScript-first APIs, and new utilities like combineSlices and createDynamicMiddleware.
What This Cheat Sheet Covers
This topic spans 16 focused tables and 118 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: Core Concepts
Redux's fundamental building blocks are store, action, reducer, dispatch, selector, middleware, and enhancer. Every Redux application — whether using plain Redux or RTK — is built on these seven concepts, so internalizing them is the foundation for everything else.
| Concept | Example | Description |
|---|---|---|
const store = configureStore({ reducer: rootReducer }) | • Holds the entire state tree of the application • provides getState(), dispatch(), and subscribe() methods | |
{ type: 'todos/add', payload: { id: 1, text: 'Learn Redux' } } | • Plain JavaScript object with a required type field (string) describing what happened • optionally includes payload with data | |
(state = initialState, action) => { switch (action.type) { case 'INCREMENT': return { count: state.count + 1 } default: return state }} | • Pure function that takes current state and an action, returns new state • must be side-effect free and deterministic | |
store.dispatch({ type: 'INCREMENT' }) | • Method to send actions to the store • triggers reducers to compute new state, then notifies subscribers |